Как удалить класс OnClicked, когда родительский div свернут?

У меня полоски меню в виде аккордеона. Изначально все меню будет свернуто. При нажатии на меню это конкретное меню будет расширяться для дополнительных опций. При выборе любого другого меню предыдущее будет свернуто. Я могу это сделать. Проблема здесь (после кода):

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 здесь

Когда меню развернуто, в нем отображаются дополнительные параметры с помощью кнопки просмотреть. К нему прикреплено событие 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");

Venky 23.06.2017 источник

comment

Не полный ответ, но .removeClass(".selectionPanel") должно быть .removeClass("selectionPanel") - Hastig Zusammenstellen 23.06.2017

comment

@Hastig Не работает. я пытался - Venky 23.06.2017

comment

Почему вы пытаетесь удалить класс selectionPanel? Как вы ожидаете, что удалить текст? - tremby 23.06.2017

comment

@Venky также ознакомьтесь с моим обновленным ответом. - Hastig Zusammenstellen 23.06.2017

Ответы (4)

arrow_upward
2
arrow_downward

Вы не добавляете никакого класса, вы просто добавляете текст. Поэтому удалите его с помощью $("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>

Shiva127 23.06.2017

comment

Что, если есть div, и мне нужно полностью удалить его, как сейчас удаляется текст? - Venky; 23.06.2017

comment

В функции обратного вызова slideUp просто добавьте функцию для удаления div, которую вы должны удалить (с .remove()). - Shiva127; 23.06.2017

arrow_upward
1
arrow_downward

Я изменил ваш 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>

user5014677 23.06.2017

arrow_upward
1
arrow_downward

Я обновил вашу скрипку, чтобы она работала так, как вы хотите. Я не хотел слишком сильно менять ваш код, но я внес несколько изменений.

Прежде всего, я думаю, что лучше иметь только одну функцию для действия showParagraph.

Я изменил, чтобы получить поле для отображения в качестве параметра (и я использую идентификаторы, проверьте также 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 каждого поля пустой строкой.

Проверить работоспособность скрипта можно здесь https://jsfiddle.net/3h8kLbak/8/

Martin Palmieri 23.06.2017

comment

Можете ли вы предложить мне, как удалить весь div, если нужно удалить не только текст? - Venky; 23.06.2017

comment

Вы хотите удалить весь div из DOM? Если вы хотите сделать это, вам придется создавать его снова каждый раз, когда пользователь нажимает кнопку «Просмотр». Что вы можете сделать, так это переключить отображаемое значение поля. Я обновил скрипт здесь: jsfiddle.net/3h8kLbak/9 - Martin Palmieri; 23.06.2017

arrow_upward
1
arrow_downward

Если это поведение, которое вы ищете, я объясню, что я сделал.

изменен на 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/

Hastig Zusammenstellen 23.06.2017

comment

Спасибо. Это сделало работу даже без объяснения причин. Это вполне объяснимо. Но можно ли удалить полный div, если вместо текста Hello Javascript присутствует div с изображениями? - Venky; 23.06.2017

comment

@Venky, я обновил его, чтобы использовать$('.box').empty() для удаления всего внутри class="box" вместо .text(''). Также загляните в .remove, .html(''), .css('display', 'none'), .css(' видимость», «скрытый»), .css («высота», «0») (с переполнением: скрыто) и т. д. - Hastig Zusammenstellen; 23.06.2017

Как удалить класс OnClicked, когда родительский div свернут?

Ответы (4)

Похожие вопросы