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

0

Я работаю над выпадающим списком кликов для моего сайта, но он не работает точно так, как я этого хочу. (http://blazebass.com/version2/?pagina=blazers)

Когда я нажимаю кнопку 1, кнопка 2 также падает. Я не хочу этого.

код страницы ниже:

<TABLE BORDER="0" align="center">
<TR><TD>    

<div class="click-nav">
<ul class="no-js">
<li>
<div class="button_blazer"><a class="clicker"><font color="white">VANCED (Producer / DJ)                </font></a></div>
<ul>
<li class="button_content">

<div class="soundcloud"><center><b><a href="http://www.soundcloud.com/vanced"         target="_new">SOUNDCLOUD</a></b></center></div>
<div class="facebook"><center><b><a href="https://www.facebook.com/vanceddubstep"     target="_new">FACEBOOK</a></center></div>

<br><br>

<u>UPCOMING EVENTS:</u><br>
<a href="https://www.facebook.com/events/1411434522422784" target="_new"><img     width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;18/04/2014 - BLAZEBASS 2<br>

<a href="https://www.facebook.com/events/708468632520791" target="_new"><img width="15px"     height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;25/04/2014 - DUBSTEP RIDDIM SESSION/PLAN B (Moscow)<br> 

<a href="https://www.facebook.com/events/282338108583569" target="_new"><img     width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;09/05/2014 - 30.000 WATTS<br>

<a href="https://www.facebook.com/events/286445134839854" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;23/05/2014 - DUBNIUM<br>

<br>
<u>PAST EVENTS:</u><br>
<a href="https://www.facebook.com/pages/Dubconscious/124580511077196?fref=ts" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png"         border="0"></a>
&nbsp;20/12/2013 - DUBCONSCIOUS 3<br>

<a href="https://www.facebook.com/blazebass" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;18/04/2013 - BLAZEBASS 1<br>

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

</TD><TD>

<div class="click-nav" STYLE="margin-left: 10px;">
<ul class="no-js">
<li>
<div class="button_blazer"><a class="clicker"><font color="white">VANCED (Producer / DJ)            </font></a></div>
<ul>
<li class="button_content">

<div class="soundcloud"><center><b><a href="http://www.soundcloud.com/vanced"     target="_new">SOUNDCLOUD</a></b></center></div>
<div class="facebook"><center><b><a href="https://www.facebook.com/vanceddubstep"             target="_new">FACEBOOK</a></center></div>

<br><br>

<u>UPCOMING EVENTS:</u><br>
<a href="https://www.facebook.com/events/1411434522422784" target="_new"><img     width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;18/04/2014 - BLAZEBASS 2<br>

<a href="https://www.facebook.com/events/708468632520791" target="_new"><img     width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;25/04/2014 - DUBSTEP RIDDIM SESSION/PLAN B (Moscow)<br> 

<a href="https://www.facebook.com/events/282338108583569" target="_new"><img     width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;09/05/2014 - 30.000 WATTS<br>

<a href="https://www.facebook.com/events/286445134839854" target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;23/05/2014 - DUBNIUM<br>

<br>
<u>PAST EVENTS:</u><br>
<a href="https://www.facebook.com/pages/Dubconscious/124580511077196?fref=ts"         target="_new"><img width="15px" height="15px" src="images/facebook_button_small.png"         border="0"></a>
&nbsp;20/12/2013 - DUBCONSCIOUS 3<br>

<a href="https://www.facebook.com/blazebass" target="_new"><img width="15px"     height="15px" src="images/facebook_button_small.png" border="0"></a>
&nbsp;18/04/2013 - BLAZEBASS 1<br>

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

</TD></TR>
</TABLE>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
    // Clickable Dropdown
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav .js').click(function(e) {
        $('.click-nav .js ul').slideToggle(200);
        $('.clicker').toggleClass('active');
        e.stopPropagation();
    });
    $(document).click(function() {
        if ($('.click-nav .js ul').is(':visible')) {
            $('.click-nav .js ul', this).slideUp();
            $('.clicker').removeClass('active');
        }
    });
});
</script>
Теги:
dropdownbox

1 ответ

0

Вы можете получить доступ к элементу с e.currentTarget через e.currentTarget чтобы вы могли существенно изменить ваш слушатель на что-то вроде этого:

$('.click-nav .js').click(function(e) {
    $('ul', e.currentTarget).slideToggle(200);
    $('.clicker', e.currentTarget).toggleClass('active');
    e.stopPropagation();
});

То, что это делает, ограничивает поиск после "ul" и ".clicker" до фактической области щелчка.

Кроме того, в качестве подсказки вы должны использовать отступы внутри своего кода, так как его довольно трудно прочитать.

Поделиться
  • 0
    Спасибо, но это не работает: /
  • 0
    Что не работает? Срабатывает ли обработчик кликов? Вы все еще испытываете старое поведение?
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню