Cibler l'élément parent jQuery

Question

J'essaie d'appliquer certaines classes avec jQuery en mode mobile. En utilisant Bootstrap et Font Awesome dès maintenant et quand en vue mobile, la flèche vers le bas de la carotte devient un signe plus qui serait cliquable pour développer le menu déroulant. En ce moment, lorsque vous cliquez sur l'icône + Font Awesome, les deux listes déroulantes seront développées.

Comment puis-je faire en sorte qu'il s'applique à la liste déroulante se rapportant à l'icône +?

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

Voici le jQuery sur la page que j'utilise actuellement.

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

J'ai corrigé le problème que j'avais.

Changé ceci:

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

à ceci:

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