Применение другого класса CSS при нажатии с помощью jQuery

В настоящее время я настраиваю сайт WordPress, используя этот шаблон из ThemeForest, и вот live preview того, над чем я сейчас работаю (который теперь должен работать - сообщите мне, если он не работает).

Я настроил CSS так, чтобы левая граница при наведении указала на светло-серый цвет. Затем, когда ссылка была нажата, левая граница тогда будет выбранным синим цветом.

Как показано ниже, основная проблема, с которой я сталкиваюсь в навигации, - это CSS. В ссылке Портфолио (раздел Портфолио на картинке) по-прежнему применяется выбранный класс вместе с элементом внутреннего неупорядоченного списка. Я хотел бы, чтобы он выглядел как раздел блога на картинке, где ссылка в блоге больше не применяет выбранный элемент класса.

Я спросил создателя шаблона, почему это происходит; его ответ должен был быть другой ссылкой ниже, которая содержала атрибут title allportfolio, чтобы он работал правильно. Я попытался добавить этот атрибут к главной ссылке "Портфолио", но затем полностью закрыл список.

Когда меню создано, браузер создает выбор портфолио следующим образом в HTML:

<ul class="main-menu" id="menu-main-menu">
    <li class="parent selected" id="menu-item-1172">
       <p><a href="#" onclick="location.href='http://localhost/portfolio/'; return false;" 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>

Я попытался сделать что-то похожее на этот ответ, но не работал, так как он не включал ничего в элемент списка. Следующий код jQuery ниже - моя попытка:

/*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');
    });

Я чувствую себя застрявшим, потому что не могу понять, как выглядит HTML ниже (выбирая класс CSS "selected" и добавляя элемент меню CSS "):

<ul class="main-menu" id="menu-main-menu">
    <li class="parent menu-item" id="menu-item-1172">
       <p><a href="#" onclick="location.href='http://localhost/portfolio/'; return false;" 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>

ОБНОВЛЕНИЕ: ответ @limelights, похоже, сработал, но я нашел некоторый jQuery, который влияет на эффекты зависания ссылок на веб-сайте, и не был уверен, что именно по этой причине ответ на код не работал. файл scripts.js шаблона WordPress

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

Кроме того, я очень близок к тому, что хочу выполнить, используя этот код, чтобы, наконец, открыть внутренние ссылки:

/*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();
        });

Но то, что он все еще делает (как показано ниже), состоит в том, что он по-прежнему имеет текст, выбранный как выделенный текст.

Любая помощь очень ценится!

Ответ 1

Я сделал небольшое изменение в вашем css и добавил некоторые функции jquery на вашу html-страницу следующим образом:

Изменение Css:

Найдите номер линии 67 в вашем custom.css и замените кодировку следующим образом:

/*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;
}

Этот выше один заменяется на

/*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;*/
}

Добавление функции Jquery в какой-либо файл заголовка темы или нижнего колонтитула, например,

<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>

Эти изменения меняются для меня. Чтобы увидеть это в действии: http://jsbin.com/ehagal/1

Я думаю, это поможет вам решить вашу проблему.

Ответ 2

Это дает вам ожидаемое поведение?

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

Добавление e.preventDefault() должно решить проблему.

ОБНОВЛЕНО 12/10/2012:

Попробуйте обновить функцию click до следующего:

$('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'})
});

Ответ 3

Если я правильно вас понимаю, это должно помочь вам, если вы можете вставить любой тип script, который есть.:)

$('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();
});

Надеюсь, это то, что вам нужно!:)

Вы можете попробовать здесь на TInker.io

Я разместил два предупреждения, чтобы вы могли увидеть, что класс действительно удаляется, а затем добавляется другой класс. Вы, конечно, должны указать, как выглядит новый класс в css.

Ответ 4

Добавление некоторого jQuery должно решить вашу проблему, если у вас есть копия того, что я вижу в режиме предварительного просмотра в реальном времени, без упоминаемой настройки.

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