單擊觸發時框關閉-有解無憂

顯示/隱藏切換在單擊超過 1 次時起作用，但是當頁面加載時，當我第一次單擊超鏈接時它會關閉。它應該在第一次單擊時打開。

$(".openNav").click(function() {
  $('.box').show();
  $('.box').toggleClass("slideUp")
});

.clickbox {
  width: 100px;
  height: 100px;
  background: #343434;
  margin: 0 auto;
  color: #fff;
}

.openNav {
  color: #fff;
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  margin: 0 auto;
  margin-top: 3%;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.box.slideUp {
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box" style="display: none;"><a href="javascript:;" class="openNav">dddd</a</div>

uj5u.com熱心網友回復：

只需在 HTML 標記中添加“slideUp”類：

<div class="box slideUp">

注意：style="display: none;"然后不再需要該元素上的屬性，您也不必執行$('.box').show().

更新片段：

$(".openNav").click(function() {
  $('.box').toggleClass("slideUp")
});

.clickbox {
  width: 100px;
  height: 100px;
  background: #343434;
  margin: 0 auto;
  color: #fff;
}

.openNav {
  color: #fff;
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  margin: 0 auto;
  margin-top: 3%;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.box.slideUp {
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box slideUp"><a href="javascript:;" class="openNav">dddd</a</div>

uj5u.com熱心網友回復：

試試這個代碼：

$(".openNav").click(function() {
  $('.box').slideToggle("fast");
});

.clickbox {
  width: 100px;
  height: 100px;
  background: #343434;
  margin: 0 auto;
  color: #fff;
}

.openNav {
  color: #fff;
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  margin: 0 auto;
  margin-top: 3%;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.box.slideUp {
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box" style="display: none;"><a href="javascript:;" class="openNav">dddd</a</div>

uj5u.com熱心網友回復：

<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box"><a href="javascript:;" class="openNav">dddd</a</div>

$(".openNav").click(function() {
  $('.box').show();
  $('.box').toggleClass("slideUp")
});

.clickbox {
  width: 100px;
  height: 100px;
  background: #343434;
  margin: 0 auto;
  color: #fff;
}

.openNav {
  color: #fff;
}

.box {
  width: 200px;
  height: 0px;
  background: orange;
  margin: 0 auto;
  margin-top: 3%;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.box.slideUp {
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box" style="display: none;"><a href="javascript:;">dddd</a</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/451900.html

標籤：javascript html jQuery css

上一篇：如何在HTML頁面中顯示和隱藏表單？

下一篇：關于Routev6(privateroute)中的反應錯誤