javascript-show 有效，但不隐藏答案

【问题标题】：javascript-show works, but not hidejavascript-show 有效，但不隐藏
【发布时间】：2013-08-04 20:07:58
【问题描述】：

您好，我正在运行一个相当简单的脚本，该脚本在单击时会显示隐藏 div 中的内容。问题是“隐藏”元素不能仅“显示”。

<script type="text/javascript">
    $(function() {
    $(".slidingDiv").hide();
    $(".hide, .show").show().on('click', function(e) {
        var elm = $(e.target).is('.show') ? $(e.target) : $(e.target).parent().prev('.show');
        elm.toggle().next(".slidingDiv").slideToggle()
    });
});
</script>

<style type="text/css">
.slidingDiv {
    display: none;
    height:200px;
    width:auto;
}
</style

<div id="footer-widgets-container">
    <div id="footer-widgets" class="col-full col-4"> <a href="#" class="show">Show</a>

        <div class="slidingDiv">
            <div class="block footer-widget-1 widget">
                <div class="col1a"></div>
                <div class="col3c"></div>
                <div class="col2b"></div>
            </div>
            <div class="block footer-widget-2"></div>
            <div class="block footer-widget-3"></div>
            <div class="block footer-widget-4">
                <div class="skype p"><a href="#"><p>Skype</p></a>
                </div>
                <div class="email p"><a href="#"><p>Email</p></a>
                </div>
            </div>
        </div>
    </div><a href="#" class="hide">Hide</a>

</div>

【问题讨论】：

隐藏不起作用？在函数 hide 或带有类 hide 的 div 中？
这里是 jsFiddle - jsfiddle.net/nG8Sm/1。用它来描述你想要什么。
使用“hide”的 div 类确实隐藏了页脚，而“show”显示了页脚，一旦显示我就无法隐藏它。

标签： javascript css hide element

【解决方案1】：

这是因为你使用了错误的选择器。

您可以更改您的 hide 标记，使其位于正确的 div 内，或者更改您的代码，如下所示：

<script type="text/javascript">
    $(function() {
        $(".slidingDiv").hide();
        $(".hide, .show").show().on('click', function(e) {
            var elm = $(e.target).is('.show') ? $(e.target) : $(e.target).parent().find('.show');
            elm.toggle().next(".slidingDiv").slideToggle()
        });
    });
</script>

我已将$(e.target).parent().prev('. show') 更改为$(e.target).parent().find('.show')，因为show 不在div 中。

希望对你有帮助。

【讨论】：