Slidetoggle скрыть предыдущий div - PullRequest
Новая
       9

Slidetoggle скрыть предыдущий div

0 голосов
/ 18 мая 2018

Заранее спасибо за ваше время!Это мои настройки и Id, как ранее щелкнувшие div, чтобы скрыть их перед показом нового div с помощью slidetoggle.

CSS: 

.waxing {
    display: none;
}

.facials {
    display: none;
}

.bodywraps {
   display: none;
}

HTML 

<div class="heroIcons">
    <div class="button waxingButton">
        <p>view prices</p>
    </div>

    <div class="button facialsButton">
        <p>view prices</p>
    </div>

    <div class="button bodywrapsButton">
        <p>view prices</p>
    </div> 
</div>

<div class="section services">
    <div class="wrapper">
        <div class="waxing">
            <p>content that I want to slidetoggle</p>
        </div>
    </div>   
</div>

<div class="section services">
    <div class="wrapper">
        <div class="facials">
            <p>content that I want to slidetoggle</p>
        </div>
    </div>   
</div>

<div class="section services">
    <div class="wrapper">
        <div class="bodywraps">
            <p>content that I want to slidetoggle</p>
        </div>
    </div>   
</div>

JQuery 

$(".heroIcons .waxingButton").click(function(){
    $(".waxing").slideToggle(1500);
});

$(".heroIcons .facialsButton").click(function(){
    $(".facials").slideToggle(1500);
});

$(".heroIcons .bodywrapsButton").click(function(){
    $(".bodywraps").slideToggle(1500);
});

Все это прекрасно работает, но мне хотелось бы закрыть ранее открытые div, когда я нажимаю, чтобы открыть другой div

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Вы должны стараться избегать повторения кода как можно больше ( Принцип СУХОГО ).

Вот немного переработанная разметка, но вы можете добавить любое количество кнопок и разделов без добавления дополнительного кода JS: 

$(".button").click(function() {
  var className = $(this).data('button')
  
  $('.content').hide()
  $('.' + className).slideToggle(1500);
});
.button {
  cursor: pointer
}

.content {
  display: none;
  background: honeydew;
  border: 1px solid green;
  padding: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="button" data-button="waxing">
  <p>view prices</p>
</div>

<div class="button" data-button="facials">
  <p>view prices</p>
</div>

<div class="button" data-button="bodywraps">
  <p>view prices</p>
</div>

<div class="content waxing">waxing PRICES</div>
<div class="content facials">facials PRICES</div>
<div class="content bodywraps">bodywraps PRICES</div>
0 голосов
/ 18 мая 2018

Вы могли бы сделать что-то вроде этого - он должен скрыть раскрывающиеся выпадающие списки, прежде чем открывать тот, на который вы нажали (вам нужно настроить скорость на .hide) 

$(".heroIcons .waxingButton").click(function() {
$(".bodywraps").hide(1500);
$(".facials").hide(1500);
$(".waxing").slideToggle(1500);
});

$(".heroIcons .facialsButton").click(function() {
$(".bodywraps").hide(1500);
$(".waxing").hide(1500);
$(".facials").slideToggle(1500);
});

$(".heroIcons .bodywrapsButton").click(function() {
$(".waxing").hide(1500);
$(".facials").hide(1500);
$(".bodywraps").slideToggle(1500);
});
...