jquery - 三元 jquery .click(function() {

Question

我对 jquery 很陌生，我得到了一个任务，我想在点击 a#local-popular 时显示 div#pgmenu2。

我知道我需要我的 jquery 像这样开始：

<script type="text/javascript">
  $(document).ready(function() {
    $("#local-popular").click(function() {


    });
  });
</script>

HTML

<a id="local-popular" href="http://lh.com"><p>Popular Searches ▼&lt;/p></a>
   <div id="pgmenu2">
   <ul type="disc">
          <li></li>
          <li></li>
        </ul>
   </div>

谢谢您的帮助！

Answer 1

$(document).ready(function() {
    $("#local-popular").click(function() {
      $("#pgmenu2").show();
    });
});

.toggle或者，如果您想在后续点击中显示/隐藏，您可以使用

$("#pgmenu2").toggle();

Answer 2

最初在css中设置div #pgmenu2为display:none

     #pgmenu2
          {
              display:none;
          }

并使用下面的代码在点击时显示

       $(document).ready(function() {
           $("#local-popular").click(function() {
               $("#pgmenu2").show();
                 });
             });

//下面的代码显示和隐藏onclick

             $(document).ready(function() {
           $("#local-popular").click(function() {
               $("#pgmenu2").toggle();
                 });
             });

//下面的代码以滑动方式显示和隐藏onclick

          $(document).ready(function() {
           $("#local-popular").click(function() {
               $("#pgmenu2").slideToggle();
                 });
             });

Answer 3

将 display:none 添加到 div：

<div id="pgmenu2" style="display:none">
   <ul type="disc">
          <li></li>
          <li></li>
        </ul>
</div>

js部分是：

$(document).ready(function() {
    $("#local-popular").click(function() {
        $("#pgmenu2").show();
    });
  });

或者，如果您希望能够再次隐藏它，您可以使用：

$("#pgmenu2").toggle();