Блог

Главная - Вопросы по программированию - Проблема с выпадающим списком

Проблема с выпадающим списком

#javascript #jquery

#javascript #jquery

Вопрос:

HTML

    <a id="btn" class="btn" href="#."></a>
   <div id="main-dropdown" class="hide">
       <ul id="dropdown">
          <li><a href="/">Back </a></li>
          <li><a href="/foo">Foo </a></li>
          <li><a href="/bar">Bar </a></li>
          <li><a href="/baz">Baz </a></li>
          <li><a href="/no">No Bar </a></li>
       </ul>
   </div>

Jquery

 $(".btn").click(function(e) {
    e.preventDefault();
    $("#main-dropdown").removeClass('hide');
    $("#main-dropdown").addClass('show');
    return false;
});

$("#dropdown").mouseup(function() {
    return false
});

$(document).mouseup(function(e) {
    if($('#main-dropdown').hasClass('show')) {
        $("#main-dropdown").removeClass('show');
        $("#main-dropdown").addClass('hide');
        return false;
    }
    $("#main-dropdown").removeClass("show");
    $("#main-dropdown").addClass("hide");
});

Проблема:
Когда я нажимаю на href (id = btn), появляется выпадающий список, но когда я снова нажимаю на эту кнопку, она должна скрываться
чего не происходит. Где я делаю неправильно.

Ответ №1:

Изменить

 $("#dropdown").mouseup(function() {
    return false
});

Для

 $("#dropdown a").click(function() {
    return false;
});

еще несколько замечаний

  1. удалите return false; из mouseup событий, потому что для этого события нет действия по умолчанию..
  2. нет необходимости вызывать оба e.preventDefault(); и return false для получения ссылок.. одного должно быть достаточно. (если вы хотите остановить пузырькование, используйте только return false
  3. проверьте .toggleClass()

упрощенная версия

 $(".btn").click(function(e) {
    e.preventDefault();
    if($('#main-dropdown').hasClass('hide')){
        $("#main-dropdown").toggleClass('hide show');
    }
});

$("#dropdown a").click(function() {
    return false;
});

$(document).mouseup(function(e) {
      if($('#main-dropdown').hasClass('show')) {
        $("#main-dropdown").toggleClass('hide show');
    }
});

демо http://jsfiddle.net/gaby/yjWNg/1 /

обновление для комментариев

Произошла небольшая ошибка в том, что мы должны обрабатывать событие click во всех случаях..

 $(".btn").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $("#main-dropdown").toggleClass('show hide');
});

$("#dropdown a").click(function() {
    return false;
});

$(document).click(function(e) {
      if($('#main-dropdown').hasClass('show')) {
        $("#main-dropdown").toggleClass('hide show');
    }
});

демо http://jsfiddle.net/gaby/yjWNg/5 /

Комментарии:

1. спасибо за предложение, но моя проблема все еще решается. В вашем примере, как только я нажимаю ссылку «Показать», она должна открыться, но если выпадающий список виден, он должен быть скрыт.

Ответ №2:

Я не уверен в том, что вы хотите сделать, но попробуйте это: http://jsbin.com/ehola3/edit

Ответ №3:

 $(".btn").click(function(e) {
    e.preventDefault();
    if($("#main-dropdown").hasClass('hide')){
        $("#main-dropdown").removeClass('hide');
        $("#main-dropdown").addClass('show');
    }
    else{
        $("#main-dropdown").removeClass('show');
        $("#main-dropdown").addClass('hide');
    }
    return false;
 });

что-то вроде этого?

Ответ №4:

Вы действительно должны использовать toggle () для отображения и скрытия содержимого.

 <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>
<p style="display: none">Hello</p>
<script>

$("button").click(function () {
  $("p").toggle("show");
});
</script>

</body>
</html>

Ответ №5:

Вы могли бы использовать toggleClass для переключения этого hide класса

 $(".btn").click(function(e) {
    e.preventDefault();
    $("#main-dropdown").toggleClass('hide');
});

Рабочий пример: ЗДЕСЬ

HTML:

 <a href="#" class="btn">Show/Hide</a>
<div id="main-dropdown" class="hide">
    <ul id="dropdown">
      <li><a href="/">Back </a></li>
      <li><a href="/foo">Foo </a></li>
      <li><a href="/bar">Bar </a></li>
      <li><a href="/baz">Baz </a></li>
      <li><a href="/no">No Bar </a></li>
    </ul>
</div>

JQUERY:

 $(".btn").click(function(e) {
    e.preventDefault();
    $("#main-dropdown").toggleClass('hide');
});

CSS:

 .hide {display: none;}