Aplicando diferentes clases de CSS al hacer clic usando jQuery

Actualmente estoy configurando un sitio de WordPress, usando esta plantilla de ThemeForest, y aquí está el vista previa en vivo de lo que estoy trabajando actualmente (que ahora debería estar funcionando; avíseme si no funciona).

Configuré el CSS para que el borde izquierdo cuando se desplazara fuera de color gris claro. Luego, cuando se hizo clic en el enlace, el borde izquierdo sería el color azul que seleccioné.

Como se muestra a continuación, el principal problema que tengo con la navegación está en el CSS. El enlace Portafolio (Sección Portafolio en la imagen) todavía tiene la clase seleccionada que se está aplicando, junto con el elemento de la lista interna desordenada. Me gustaría que se pareciera a la sección de blog de la imagen, donde el enlace del blog ya no se aplica al elemento de clase seleccionado.

Le pregunté al creador de la plantilla por qué ocurría esto; su respuesta fue que debe haber otro enlace debajo que contenga el atributo de título ‘allportfolio’ para que funcione correctamente. Intenté agregar este atributo al enlace principal de la cartera, pero luego cerré la lista por completo.

Cuando se crea el menú, el navegador crea la selección de Portafolio de la siguiente manera en HTML:

<ul class="main-menu" id="menu-main-menu">
    <li class="parent selected" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

Intenté algo similar a esta respuesta, pero no funcionó porque no parecía incluir nada dentro del elemento de la lista. El siguiente código jQuery a continuación es mi intento:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu ul.submenu li p a').click(
        function(){
            $('ul#menu-main-menu li').removeClass('parent selected');
            $(this).addClass('parent menu-item');
    });

Me siento atascado porque no puedo entender cómo hacer que el HTML se vea como a continuación (quitando la clase CSS ‘seleccionada’ y agregando la clase CSS ‘elemento de menú’):

<ul class="main-menu" id="menu-main-menu">
    <li class="parent menu-item" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

ACTUALIZACIÓN: la respuesta de @limelights parecía funcionar, pero encontré jQuery que afecta los efectos de desplazamiento del enlace en el sitio web y no estaba seguro de si esa era la razón por la que la respuesta al código no funcionaba está en el archivo scripts.js de la plantilla de wordpress

/* Links roll over effect */
    $('a').each(function(){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    })

Además, estoy muy cerca de lo que quiero lograr, usando este código para finalmente mantener abiertos los enlaces internos:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
        function(){
            $('ul#menu-main-menu > li').removeClass('selected');
            $('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
            $('ul#menu-main-menu li div:first').show();
        });

Pero, lo que todavía está haciendo (como se ve a continuación) es que todavía tiene el texto elegido como el texto seleccionado.

¡Cualquier ayuda es muy apreciada!

¿Esto le da el comportamiento esperado?

  $('a').each(function(e){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
        $(this).hoverFadeColor();
        e.preventDefault();
   })

Agregar e.preventDefault() debería resolver el problema.

ACTUALIZADO EL 10/12/2012:

Intente actualizar su función de clic a lo siguiente:

$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').on("click",function(){
    var linkClicked = $(this);
    $("#menu-main-menu li").each(function(){
        $(this).removeClass("selected").css({'color' : '#888'}).addClass('menu-item');
        $(this).first("div").show();
    });
    linkClicked.css({'color' : '#222'})
});

Hice un pequeño cambio en su css y agregué algunas funciones de jquery en su página html de la siguiente manera:

Cambio CSS:

Encuentre la línea número 67 en su custom.css y reemplace la codificación de la siguiente manera,

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   border-left:6px solid #F0F0F0;
}

Este anterior se reemplaza en

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   /*border-left:6px solid #F0F0F0;*/
}

Agregar la función Jquery en algún lugar del archivo de encabezado o pie de página de su tema como se muestra a continuación:

<script type="text/javascript">
$(document).ready(function() {
$("#menu-main-menu li:first").addClass("selected");
$("#menu-main-menu li p a").css("border-left","none");
$("#menu-main-menu li p a").hover(function(){$(this).css("border-left","6px solid #F0F0F0");});
$("#menu-main-menu li").click(function() {
  $(this).addClass("selected");
});
});
</script>

Estos cambios anteriores están funcionando para mí. Para verlo en acción: http://jsbin.com/ehagal/1

Creo que esto puede ayudarte a resolver tu problema.

Si lo entiendo correctamente, esto debería ayudarlo, si puede insertar cualquier tipo de script que sea. 🙂

$('ul#menu-main-menu li div ul.sub-menu li.menu-item p a').click(function(event){
    $('ul#menu-main-menu > li').removeClass('selected');
    alert($('ul#menu-main-menu > li').attr('class'));
    $('ul#menu-main-menu li').addClass('menu-item');
    alert($('ul#menu-main-menu > li').attr('class'));
    event.preventDefault();
});

¡Espero que esto sea lo que buscas! 🙂

Puedes probarlo aquí en Tinker.io

Puse dos alertas para que pueda ver que la clase en realidad se elimina y luego se agrega una clase diferente. Por supuesto, debe especificar cómo se ve la nueva clase en el css.

Agregar algo de jQuery debería resolver su problema si tiene una copia de lo que veo en la vista previa en vivo sin una personalización mencionable.

$("#menu-main-menu li").click(function(){ 
    $("#menu-main-menu li").removeClass("selected"); 
});