Question

我试图在手机上制作一个标准的汉堡图标，点击菜单时显示一个菜单，再次点击时菜单会消失。我所拥有的功能使菜单显示但再次单击时不会消失。这段代码似乎没有这样做：

的Javascript / Jquery的：

<script>

function show( elem )

{
    var n=$(elem).is(":visible"); 

    if (n==false){

    $('#'+elem).show();
    }

    if (n==true) {
        $('#'+elem).hide();
    }
}
</script>

HTML / PHP

<table align="center"><tr><td><a href="#" onclick="show('link1')"><img src="images/hamburger.png"></a> </td></tr></table>

<div id="link1" class="dynamic_link" style="display:none">

  <?php

    phoneMenu(); 

    ?>

</div>

Answer 1

尝试使用.toggle()

＆＃13;

// added `foodicon` `id` to `img`,
// removed `onclick` from `html`
$("#foodicon").on("click", function() {
  $("#link1").toggle()
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table align="center">
  <tr>
    <td>
      <a href="#">
        <!-- assign `foodicon` `id` to `img` -->
        <img id="foodicon" src="http://lorempixel.com/100/100/food">
      </a>
    </td>
  </tr>
</table>

<div id="link1" class="dynamic_link" style="display:none">
  food menu
</div>

＆＃13;

单击相同的图标使菜单显示和消失

1 个答案: