Question

我一直在为一家本地公司开发内部应用程序，我正在尝试使用jQuery作为一个简单的按钮下拉菜单主页，该主页仅链接到应用程序中的其他位置，但是当我单击一个按钮时，它们全部同时打开，我不确定该怎么做才能修复它。

我对使用jQuery还很陌生，但是它非常适合我对该Web应用程序的需求，感谢您的帮助。

似乎应该是一个简单的修复程序，我似乎无法在任何地方找到它。

顶部按钮的下拉列表也在第二个按钮下方打开，我不确定为什么会这样。

    .main-flex-container {
    justify-content: center;

    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%,-50%);

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.main-dropdown {
    position: absolute;
}

button {
    position: relative;
    width: 98vw;
    height: 60px;
    font-size: 2em;
    font-weight: 900;
    font-family: "Saira Condensed" , sans-serif;
    color: white;
    background: #b31e1f;
    border: black;
    margin: 5px;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}

.main-dropdown ul {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #ccc;
    transform-origin: top;
    transform: perspective(1000px) rotateX(-90deg);
    transition: 0.5s;
}

.main-dropdown ul.active {
    transform: perspective(1000px) rotateX(0deg);

}

.main-dropdown ul li {
    list-style: none;
}

.main-dropdown ul li a {
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    background: #262626;
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.2);
    transition: 0.5s;
}

.main-dropdown ul li a:hover {
    background: #b33e3f;
}
#main-caret {
    vertical-align: middle;
    float: right;
    margin: 10px 1em 0 0;
}

<body>

<div class="main-flex-container">

    <div class="main-dropdown">


        <div class="main-dropdown-item">
            <button>TODAY <i class="fas fa-caret-down" id="main-caret"></i></button>
            <ul class="btn-dropdown">
                <li><a  href="#">Today</a>
                </li>
                <li><a
                       href="#">Map
                        Todays Jobs</a></li>
                <li><a href="#">Timeclock</a></li>
            </ul>
        </div>


        <div class="main-dropdown-item">
            <button>FIELD <i class="fas fa-caret-down" id="main-caret"></i></button>
            <ul class="btn-dropdown">
                <li><a
                       href="#">Timesheet
                        Lookup</a></li>
                <li><a href="#">Hourly
                        Listing</a></li>
                <li><a href="#">Timeclock
                        Records</a></li>
            </ul>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script type="text/javascript">
     $(document).ready(function () {
         $('button').click(function () {
             $('ul').toggleClass('active')
         })
     })
    // $(".button").on('click', function (e) {
        // e.stopPropagation();
        // var $dropdown = $(this).siblings().fadeToggle();
        // $('.main-dropdown .btn-dropdown').not($dropdown).fadeOut();
    // });
   // $(document).on('click', function (e) {
        // $('.main-dropdown .btn-dropdown').fadeOut();
    // });
</script>
</body>

Answer 1

您需要确定要在哪个<ul>中执行操作，否则它将在所有<ul>中执行给定的操作。如上所述，兄弟姐妹可能会胜任。您可以尝试以下方法。

 $(document).ready(function () {
     $('button').click(function () {
         $(this).siblings('ul').toggleClass('active');
     })
 })

Answer 2

您需要确定单击了哪个按钮，然后找出正确的列表以根据单击的按钮向其添加活动类。现在，它正在为页面上的所有ul元素添加活动内容。

下面的示例应帮助您走上正确的道路。

.main-flex-container {
  justify-content: center;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.main-dropdown {
  position: absolute;
}

button {
  position: relative;
  width: 98vw;
  height: 60px;
  font-size: 2em;
  font-weight: 900;
  font-family: "Saira Condensed", sans-serif;
  color: white;
  background: #b31e1f;
  border: black;
  margin: 5px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
}

.main-dropdown ul {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #ccc;
  transform-origin: top;
  transform: perspective(1000px) rotateX(-90deg);
  transition: 0.5s;
}

.main-dropdown ul.active {
  transform: perspective(1000px) rotateX(0deg);
}

.main-dropdown ul li {
  list-style: none;
}

.main-dropdown ul li a {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  background: #262626;
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  transition: 0.5s;
}

.main-dropdown ul li a:hover {
  background: #b33e3f;
}

#main-caret {
  vertical-align: middle;
  float: right;
  margin: 10px 1em 0 0;
}

<body>

  <div class="main-flex-container">

    <div class="main-dropdown">


      <div class="main-dropdown-item">
        <button>TODAY <i class="fas fa-caret-down" id="main-caret"></i></button>
        <ul class="btn-dropdown">
          <li><a href="#">Today</a></li>
          <li><a href="#">Map Todays Jobs</a></li>
          <li><a href="#">Timeclock</a></li>
        </ul>
      </div>


      <div class="main-dropdown-item">
        <button>FIELD <i class="fas fa-caret-down" id="main-caret"></i></button>
        <ul class="btn-dropdown">
          <li><a href="#">Timesheet Lookup</a></li>
          <li><a href="#">Hourly Listing</a></li>
          <li><a href="#">Timeclock Records</a></li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('button').click(function() {
        $(this).next('ul').toggleClass('active')
      })
    })
    // $(".button").on('click', function (e) {
    // e.stopPropagation();
    // var $dropdown = $(this).siblings().fadeToggle();
    // $('.main-dropdown .btn-dropdown').not($dropdown).fadeOut();
    // });
    // $(document).on('click', function (e) {
    // $('.main-dropdown .btn-dropdown').fadeOut();
    // });
  </script>
</body>

下拉按钮一次全部打开

2 个答案: