Question

我正在尝试创建一个切换按钮图像，该图像也会显示并隐藏div。

这是有效的： // HTML

    <body>
    <header>
        <script>
            $(document).ready(function () {
                $('a#button').click(function () {
                    $(this).toggleClass("down");
                    $("nav").show("slow");
                });
            });
            </script>
        <a id="button" title="button"></a>
        <nav style="display: none">
            <ul>
                <li>NAV</li>
            </ul>
        </nav>

    </header>
</body>

// CSS

    a {
    background-image: url(../images/menu_on.gif);
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: block;     
    }

a.down {
    background-image: url(../images/menu_off.gif);
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: block; 
    }

如何让它再次隐藏“导航”？

Answer 1

使用toggle()

$("nav").toggle("slow");

＆＃13;

$(document).ready(function() {
  $('#button').click(function() {
    $(this).toggleClass("down");
    $("nav").toggle("slow");
  });
});

＆＃13;

a {
  background-image: url(../images/menu_on.gif);
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: block;
}
a.down {
  background-image: url(../images/menu_off.gif);
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="button" title="button">a</a>
<nav style="display: none">
  <ul>
    <li>NAV</li>
  </ul>
</nav>

＆＃13;

Jquery切换按钮图像和Div显示/隐藏

1 个答案: