我正在嘗試這樣做，當單擊.toggle-menu時，資料目標會切換一個類，其他div展開

我正在嘗試這樣做，當單擊 .toggle-menu 時，資料目標會切換一個類并且其他 div 展開。

jQuery(document).ready(function() {
  var windowWidth = jQuery(window).width();
  if (windowWidth <= 768)
    jQuery('.panel-collapse').removeClass('in');

  jQuery('.toggle-menu').click(function() {
    // get this data-target
    var target = $(this).data("target");
    $(target).toggleClass('in');
  });
});

.toggle-menu {
  cursor: pointer;
}

.col .collapse.in {
  display: block;
}

.col .collapse {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#foot">Footwere</a></h4>
  </div>

  <div id="foot" class="panel-collapse collapse in">
    <p>
      Show footwere
    </p>
  </div>
</div>

<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#cloth">cloths</a></h4>
  </div>
  <div id="cloth" class="panel-collapse collapse in">
    <p>
      Show cloth
    </p>
  </div>
</div>

有任何想法嗎？謝謝。

uj5u.com熱心網友回復：

您可以找到所有.in已經存在的（.in顯示的位置）并洗掉該類。當你想切換被點擊的一個時，你需要在從其他人中洗掉時排除它：

$(".in").not(target).removeClass("in");

更新的小提琴：

jQuery(document).ready(function() {
  var windowWidth = jQuery(window).width();
  if (windowWidth <= 768)
    jQuery('.panel-collapse').removeClass('in');

  jQuery('.toggle-menu').click(function() {
    // get this data-target
    var target = $(this).data("target");
    $(".in").not(target).removeClass("in");
    $(target).toggleClass('in');
  });
});

.toggle-menu {
  cursor: pointer;
}

.col .collapse.in {
  display: block;
}

.col .collapse {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#foot">Footwere</a></h4>
  </div>

  <div id="foot" class="panel-collapse collapse in">
    <p>
      Show footwere
    </p>
  </div>
</div>

<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#cloth">cloths</a></h4>
  </div>
  <div id="cloth" class="panel-collapse collapse in">
    <p>
      Show cloth
    </p>
  </div>
</div>

編輯：具有切換的基本加/減

顯示代碼片段

jQuery(document).ready(function() {
  var windowWidth = jQuery(window).width();
  if (windowWidth <= 768) {
    jQuery('.panel-collapse').removeClass('in');
    $(".plus,.minus").toggle();
  }

  jQuery('.toggle-menu').click(function() {
    // get this data-target
    var target = $(this).data("target");
    $(".in").not(target).removeClass("in");
    $(target).toggleClass('in');
    $(this).closest(".day-header").find(".plus,.minus").toggle();
  });
});

.toggle-menu {
  cursor: pointer;
}

.col .collapse.in {
  display: block;
}

.col .collapse {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="day-header">
    <h4>
      <span class='plus' style='display:none;'> </span>
      <span class='minus'>-</span>
      <a class="toggle-menu" data-target="#foot">Footware</a>
    </h4>
  </div>

  <div id="foot" class="panel-collapse collapse in">
    <p>
      Show footware
    </p>
  </div>
</div>

<div class="col">
  <div class="day-header">
    <h4>
      <span class='plus' style='display:none;'> </span>
      <span class='minus'>-</span>
      <a class="toggle-menu" data-target="#cloth">cloths</a>
    </h4>
  </div>
  <div id="cloth" class="panel-collapse collapse in">
    <p>
      Show cloth
    </p>
  </div>
</div>

標籤：javascript 查询 css

上一篇：將自呼叫函式從npm模塊匯入react/webpack應用程式

下一篇：如何使用異步管道解決角度錯誤？