如何减少jquery代码中的行数答案

【问题标题】：How to reduce number of lines in jquery code如何减少jquery代码中的行数
【发布时间】：2016-01-30 04:53:23
【问题描述】：

我正在学习 jquery，需要你的帮助。我想减少这里的代码数量：

我在navbar 上有三个按钮。 cart，.account，.help。如果我点击cart，我想隐藏account 和help 的下拉菜单。其他按钮也是如此。这是我到目前为止写的jquery代码！谁能帮我减少代码行数？

Jquery 代码：

$(".cart").click(function(){
    $(".cart .dropdown-menu").show();
    $(".account .dropdown-menu").hide();
    $(".help .dropdown-menu").hide();
});

$(".account").click(function(){
    $(".cart .dropdown-menu").hide();
    $(".account .dropdown-menu").show();
    $(".help .dropdown-menu").hide();
});

$(".help").click(function(){
    $(".cart .dropdown-menu").hide();
    $(".account .dropdown-menu").hide();
    $(".help .dropdown-menu").show();
});

HTML 代码：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h1>madison square market</h1>
          </div>
          <div class="pull-right">
            <ul>
              <li class="cart dropdown">
                <h3>cart &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>View Cart</li>
                  <li>Saved Carts</li>
                </ul>
              </li>
              <li class="account dropdown">
                <h3>account &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>View Account</li>
                  <li>Check Order Status</li>
                  <li>Sign in</li>
                </ul>
              </li>
              <li class="help dropdown">
                <h3>help &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>FAQs</li>
                  <li>Return Policy</li>
                  <li>Shipping Info</li>
                </ul>
              </li>             
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="main">
    </div>

    <div class="supporting">
      <div class="container">
        <h2>recent arrivals</h2>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <h2>popular produce</h2>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <h3>follow</h3>
        <ul>
          <li>Twitter</li>
          <li>Instagram</li>
        </ul>
      </div>
    </div>
    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src='script.js'></script>
  </body>
</html>

【问题讨论】：

您可能想在codereview.stackexchange.com 中发布此问题。它专门为此提供了一个网站。这只是另一个“无趣的问题”。
但我并不是要求进行代码审查。我很确定有更好的方法来处理这些事情。
你有没有在 Jquery 中尝试过委托事件方法...这可以让你在一定程度上减少代码？
今天是我的第一天，所以我现在就试试
你应该在这里的事件委托部分：api.jquery.com/on

标签： javascript jquery html css performance

【解决方案1】：

你好，你可以这样减少

$('.dropdown-menu').prev("h3").on("click",function(){
   $('.dropdown-menu').hide();
   $(this).next(".dropdown-menu").show();    
});

【讨论】：