Question

我正在学习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 CODE：

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

Answer 1

你好你可以像这样减少它

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

如何减少jquery代码中的行数

1 个答案: