Slidetoggle隐藏上一个div

时间:2018-05-18 14:29:51

标签: jquery html css slidetoggle

提前感谢您的时间! 这是我的设置和Id,就像之前点击的div一样,在使用slidetoggle显示新的div之前隐藏。

CSS:

static func sendFormattedTimeString(_ string: String?) -> String {
    let dateFormatterGet = DateFormatter()
    dateFormatterGet.dateFormat = "HH:mm"
    dateFormatterGet.timeZone = TimeZone.current

    let dateFormatterPrint = DateFormatter()
    dateFormatterPrint.dateFormat = "HH:mm:ss"
    dateFormatterPrint.timeZone = TimeZone(identifier: "UTC")
    if let string = string,
        let date = dateFormatterGet.date(from: string) {
        return dateFormatterPrint.string(from: date)
    }
    else {
        print("There was an error decoding the string")
        return ""
    }
}

HTML

.waxing {
    display: none;
}

.facials {
    display: none;
}

.bodywraps {
   display: none;
}

JQuery的

<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>

这一切都很好,但是当我点击打开另一个div时,我喜欢关闭之前打开的div

2 个答案:

答案 0 :(得分:1)

您应该尽量避免重复代码( DRY原则)。

这是一个有点重构的标记,但您可以添加任意数量的按钮和部分,而无需添加更多JS代码:

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

.content {
  display: none;
  background: honeydew;
  border: 1px solid green;
  padding: 1rem;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

你可以这样做 - 它应该在你打开之前隐藏打开的下拉菜单(你需要调整.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);
});