親要素jQueryをターゲットにする

Question

モバイルビューでは、jQueryで特定のクラスを適用しようとしています。 BootstrapとFont Awesomeを使用しています。モバイルビューで矢印をクリックすると、クリックしてドロップダウンメニューを展開するプラス記号に変わります。今すぐ+フォントの驚くばかりのアイコンをクリックすると、両方のドロップダウンを展開します。

+アイコンに関連するドロップダウンに適用するにはどうすればよいですか？

<ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown"> 
    <a href="http://www.google.com" class="dropdown-toggle disabled" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Google</a> <span class="fa fa-caret-down hidden-xs" aria-hidden="true"></span><span class="fa visible-xs-inline pull-right fa-plus"></span> <span class="sr-only">Drop Down Indicator Icon</span> 
    <ul class="dropdown-menu"> 
     <li><a href="http://smile.amazon.com">Amazon</a></li> 
     <li><a href="#">Fake Link 1</a></li> 
     <li><a href="#">Fake Link 2</a></li> 
     <li><a href="#">Fake Link 2</a></li> 
    </ul> 
    </li> 
    <li class="dropdown"> 
    <a href="http://smile.amazon.com" class="dropdown-toggle disabled" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Amazon</a> <span class="fa fa-caret-down hidden-xs" aria-hidden="true"></span><span class="fa fa-plus visible-xs-inline pull-right"></span> <span class="sr-only">Drop Down Indicator Icon</span> 
    <ul class="dropdown-menu"> 
     <li><a href="http://www.google.com">Google</a></li> 
     <li><a href="#">Fake Link 1</a></li> 
     <li><a href="#">Fake Link 2</a></li> 
     <li><a href="#">Fake Link 2</a></li> 
    </ul> 
    </li> 
    <li> 
    <a href="#">Menu Item</a> 
    </li> 
    <li> 
    <a href="#">Menu Item</a> 
    </li> 
    <li> 
    <a href="#">Menu Item</a> 
    </li> 
</ul> 

ここは、現在使用しているページのjQueryです。

//Hover for the navigation. 
$(function() { 
    $(".dropdown").hover(
    function(){ 
     $(this).addClass('open'); 
     $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "true"); 
    }, 
    function(){ 
     $(this).removeClass('open'); 
     $(".dropdown .dropdown-toggle").attr("aria-expanded", "false"); 
    } 
); 
}); 

$('.dropdown-toggle').addClass("disabled"); 

//Add dropdown carrot to the dropdown items in menu. 
$("a.dropdown-toggle").after(" <span class='fa fa-caret-down hidden-xs' aria-hidden='true'></span><span class='fa fa-plus visible-xs-inline pull-right'></span> <span class='sr-only'>Drop Down Indicator Icon</span>");  
//Provides a way for the user to expand and collapse menu in mobile view. 
$(document).ready(function() { 
    $("span.fa-plus").click(
    (function(e){ 
     if ($(".navbar-collapse.collapse.in .navbar-nav li.dropdown").hasClass('menu-open')) { 
     $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('open'); 
     $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('menu-open'); 
     $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "true"); 
     console.log("Top If"); 
     } 
     else { 
     $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").addClass('menu-open'); 
     $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('open'); 
     $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "false"); 
     console.log("Bottom If"); 
     } 
     //alert("FA Plus");    
     $(this).toggleClass('fa-plus'); 
     $(this).toggleClass('fa-minus'); 
     return false; 
    }) 
); 
}); 

Answer 1

私は問題を修正しました。これに

$(document).ready(function() { 
    $("span.fa-plus").click(
    (function(e){ 
     if ($(".navbar-collapse.collapse.in .navbar-nav li.dropdown").hasClass('menu-open')) { 
     $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('open'); 
     $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('menu-open'); 
     $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "true"); 
     console.log("Top If"); 
     } 
     else { 
     $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").addClass('menu-open'); 
     $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('open'); 
     $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "false"); 
     console.log("Bottom If"); 
     } 
     //alert("FA Plus");    
     $(this).toggleClass('fa-plus'); 
     $(this).toggleClass('fa-minus'); 
     return false; 
    }) 
); 
}); 

： - ヒュー...いや

$(document).ready(function() { 
    $("span.fa-plus").click(
     (function(){ 
      if ($(this).parent().hasClass('menu-open')) 
       { 
        $(this).parent().removeClass('open'); 
        $(this).parent().removeClass('menu-open'); 
        $(this).parent().find(".dropdown-toggle").attr("aria-expanded", "false"); 
       } 
      else 
       { 
        //$(".navbar-collapse.collapse.in .navbar-nav li.dropdown").addClass('menu-open'); 
        $(this).parent().addClass('menu-open'); 
        $(this).parent().removeClass('open'); 
        $(".dropdown.menu-open .dropdown-toggle").attr("aria-expanded", "true"); 
       } 
      //alert("FA Plus");    
      $(this).toggleClass('fa-plus'); 
      $(this).toggleClass('fa-minus'); 
      return false; 
     }) 
    ); 
});