Откройте только выпадающий список, который был нажат

Question

Я пытаюсь создать раскрывающийся список. Вот мой код: FIDDLE

Однако он открывается каждый раскрывающийся список, когда он был нажат, а не только тот, который был нажат. Как я могу его изолировать? Это полная JS:

$(function() { 
    $('.click-nav > ul').toggleClass('no-js js'); 
    $('.click-nav .js ul').hide(); 
    $('.click-nav .js').click(function (e) { 
     $('.click-nav .js ul').toggle(); 
     $('.clicker').toggleClass('active'); 
     e.stopPropagation(); 
    }); 
    $(document).click(function() { 
     if ($('.click-nav .js ul').is(':visible')) { 
      $('.click-nav .js ul', this).slideUp(); 
      $('.clicker').removeClass('active'); 
     } 
    }); 
}); 

Answer 1

В настоящее время весь ul элемент становится щелкнул. Добавьте событие click на .js li, так как навигационные элементы - li. И используйте this для получения актуальных соответствующих элементов.

$('.click-nav .js li').click(function (e) { 
    $('ul',this).toggle(); 
    $('.clicker',this).toggleClass('active'); 
    e.stopPropagation(); 
}); 

Updated Fiddle

Answer 2

Вы можете попробовать что-то вроде этого

$(function() { 
 
    $('.click-nav > ul').toggleClass('no-js js'); 
 
    $('.click-nav .js ul').hide(); 
 
    // add li to findout which one is clicked 
 
    $('.click-nav .js li').click(function(e) { 
 
    // use this to find ul inside the clicked li 
 
    $(this).find('ul').toggle() 
 
     .end().find('.clicker').toggleClass('active'); 
 
    e.stopPropagation(); 
 
    }); 
 
    $(document).click(function() { 
 
    if ($('.click-nav .js ul').is(':visible')) { 
 
     $('.click-nav .js ul', this).slideUp(); 
 
     $('.clicker').removeClass('active'); 
 
    } 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.click-nav ul { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.click-nav ul li { 
 
    position: relative; 
 
    list-style: none; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 
.click-nav ul li ul { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.click-nav ul .clicker { 
 
    position: relative; 
 
    color: black; 
 
} 
 
.click-nav ul .clicker:hover, 
 
.click-nav ul .active { 
 
    background: #196F9A; 
 
} 
 
.click-nav ul li a { 
 
    display: block; 
 
    padding: 8px 10px; 
 
    background: #FFF; 
 
    color: #333; 
 
    text-decoration: none; 
 
} 
 
.click-nav ul li a:hover { 
 
    background: #F2F2F2; 
 
} 
 
/* Fallbacks */ 
 

 
.click-nav .no-js ul { 
 
    display: none; 
 
} 
 
.click-nav .no-js:hover ul { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="click-nav"> 
 
    <ul class="no-js"> 
 
    <li> <a href="#" class="clicker">Any Time</a> 
 
     <ul> 
 
     <li><a href="#">Any Time</a> 
 

 
     </li> 
 
     <li><a href="#">Past 3 days</a> 
 

 
     </li> 
 
     <li><a href="#">Past 5 days</a> 
 

 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> <a href="#" class="clicker">Test</a> 
 
     <ul> 
 
     <li><a href="#">Any Time</a> 
 

 
     </li> 
 
     <li><a href="#">Past 3 days</a> 
 

 
     </li> 
 
     <li><a href="#">Past 5 days</a> 
 

 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>