折叠父 div 时如何删除 OnClicked 类？

Question

我有手风琴式的菜单条。最初，所有菜单都将被折叠。单击菜单时，该特定菜单将展开以提供更多选项。单击任何其他菜单时，前一个菜单将被折叠。我能够做到这一点。问题出在这里（在代码之后）：

HTML：

<script>
function showParagraph1(){
var x=document.getElementsByClassName("box1");
x[0].innerText="Hello JavaScript!"; 
}
function showParagraph2(){
var y=document.getElementsByClassName("box2");
y[0].innerText="Hello JavaScript!"; 
}
</script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph1()">
<div class="fillBlue"></div>
<div class="box1"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph2()">
<div class="fillBlue"></div>
<div class="box2"></div>
</div>

CSS

.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;    
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}.box1{
width:100%;
height:auto;
background-color: #fff;
}
.box2{
width:100%;
height:auto;
background-color: #fff;
}.fillBlue{
height:10px;
background-color:blue;
}

jQuery

$(document).ready(function(){
    $(".selectionPanel").slideUp();
    $(".title").click(function(){
        $(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
    });
        })

JS FIDDLE here

当菜单展开时，它会通过一个名为view的按钮显示更多选项。它附带了一个 onclick 事件以显示文本。 单击任何其他菜单时，展开的 div 会折叠。再次打开折叠的 div 时，它会显示使用按钮单击事件添加的文本消息。 我想删除在其父 div 折叠后立即在按钮单击时显示文本的特定类。

为了重现小提琴中的问题，

1:Click on First Option
2:Click View Button
3:Click Second Option
4:Click First Option

我不想在此处显示 Hello Javascript。只有在点击查看按钮

时才会显示

我试过了，但是没用

$(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp().removeClass(".selectionPanel");

Answer 1

您不添加任何类，您只需添加文本。所以用$("div[class^='box']").text('');删除它。

$(document).ready(function() {
  $(".selectionPanel").slideUp();
  $(".title").click(function() {
    $(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp(400, function() {
      $("div[class^='box']").text('');
    });
  });
})

.title {
  width: 100%;
  height: auto;
  background-color: #aaa;
  padding: 5px 0px 5px 0px;
  margin-top: 10px;
  cursor: pointer;
}

.title p {
  font-family: verdana;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  color: #000;
}

.selectionPanel {
  height: auto;
  width: 100%;
  background-color: blue;
  padding: 10px 0;
  text-align: center;
  display: none;
}

.box1 {
  width: 100%;
  height: auto;
  background-color: #fff;
  margin: 10px 0 -10px;
}

.box2 {
  width: 100%;
  height: auto;
  background-color: #fff;
  margin: 10px 0 -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function showParagraph1() {
    $('.box1').text('Hello JavaScript!');
  }

  function showParagraph2() {
    $('.box2').text('Hello JavaScript!');
  }
</script>
<div class="title">
  <p>First Option</p>
</div>
<div class="selectionPanel">
  Select the Duration
  <select id="duration" required>
    <option value="30">last 1 month</option>
    <option value="60">last 2 months</option>
  </select><input type="button" class="button" value="View" onclick="showParagraph1()">
  <div class="box1"></div>
</div>
<div class="title">
  <p>Second Option</p>
</div>
<div class="selectionPanel">
  Select the Duration
  <select id="duration2" required>
    <option value="30">last 1 month</option>
    <option value="60">last 2 months</option>
    </select>
  <input type="button" class="button" value="View" onclick="showParagraph2()">
  <div class="box2"></div>
</div>

Answer 2

我更改了您的 showParagraph，您不需要 2 个类 .box1 和 .box2。您只需要 1 个班级不要复制粘贴样式。如果它基本上是同一件事，那么分配一些不同的名称是没有意义的。 Showparagraph 现在将父 div 发送给函数，函数在其中找到 .box 元素并放入 html。要显示或隐藏它，它会根据情况添加 css display:block 或 display:none。

<script>
function showParagraph(el){
var el = $(el).find(".box");
el.css("display","block");
el.text("Hello JavaScript!"); 
}

$(document).ready(function(){
    $(".selectionPanel").slideUp();
    $(".title").click(function(){
        $(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
        $(".box").css("display", "none");
    });
        })
</script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph(this.parentNode)">
<div class="fillBlue"></div>
<div class="box"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View" onclick="showParagraph(this.parentNode)">
<div class="fillBlue"></div>
<div class="box"></div>
</div>

<style>
.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;    
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}

.box{
width:100%;
height:auto;
background-color: #fff;
}

.fillBlue{
height:10px;
background-color:blue;
}

</style>

Answer 3

我已将您的小提琴更新为您想要的工作方式。 我不想过多地更改您的代码，但我做了一些更改。

首先，我认为最好只为showingParagraph 操作设置一个函数。

我已修改接收框以显示为参数（我正在使用 ID，还要检查框样式的 css）

function showParagraph(box){
  var x = document.getElementById(box);
  x.innerText = "Hello JavaScript!"; 
}

你可以对 innerText 做同样的事情。

然后切换的 jQuery 部分现在看起来像这样：

$(document).ready(function(){
  $(".selectionPanel").slideUp();
  $(".title").click(function() {                      
    $(this).next(".selectionPanel").slideToggle("slow").siblings('.selectionPanel').slideUp();
    $('.box').each(function() {
      $(this)[0].innerText = '';
    })
  })
});

您将每个框的 innerText 替换为一个空字符串。

你可以检查工作小提琴herehttps://jsfiddle.net/3h8kLbak/8/

Answer 4

如果这是您正在寻找的行为，我会解释我所做的。

更新为 use.empty 而不是 .text('')

$(".title").click(function() {
  $('.selectionPanel').not($(this).next('.selectionPanel')).slideUp();
  $(this).next(".selectionPanel").slideToggle("slow");
  $('input').closest('.selectionPanel').find('.box').empty();
});

$("input").click(function() {
  if ($(this).val() === 'View') {
    $(this).closest('.selectionPanel').find('.box').text('Hello JavaScript!');
  }
})

.title{
width:100%;
height:auto;
background-color: #aaa;
padding:5px 0px 5px 0px ;
margin-top:10px;	
cursor:pointer;
}
.title p{
font-family:verdana;
text-align:center;
font-weight: bold;
font-size:1.2em;
color: #000;
}
.selectionPanel{
height:auto;
width:100%;
background-color: blue;
padding:10px 0px 0px 0px;
text-align:center;
display:none;
}.box1{
width:100%;
height:auto;
background-color: #fff;
}
.box2{
width:100%;
height:auto;
background-color: #fff;
}.fillBlue{
height:10px;
background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title"><p>First Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View">
<div class="fillBlue"></div>
<div class="box box1"></div>
</div>
<div class="title"><p>Second Option</p></div>
<div class="selectionPanel">
Select the Duration <select id="duration2" required>
<option value="30">last 1 month</option>
<option value="60">last 2 months</option>
</select>
<input type="button" class="button" value="View">
<div class="fillBlue"></div>
<div class="box box2"></div>
</div>

小提琴

https://jsfiddle.net/Hastig/3h8kLbak/10/