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

【问题标题】：Jquery Toggle Button image and Div Show/HideJquery 切换按钮图像和 Div 显示/隐藏
【发布时间】：2015-06-02 04:56:52
【问题描述】：

我正在尝试创建一个切换按钮图像，该图像还显示和隐藏一个 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; 
    }

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

【问题讨论】：

标签： jquery css toggle nav

【解决方案1】：

使用toggle()

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

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

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

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

【讨论】：

@luuuffy 如果这回答了你的问题，请接受它。