Question

Hello＆amp;祝大家新年快乐。

我的问题是关于用js淡入和隐藏div。我的页面有2或3个div。目前，当我点击div时，它会淡入。当我点击第二个div时，它也会淡入并且第一个div隐藏。

当我点击两次div时，我希望它关闭。我可以打开第二个div，它将关闭第一个div，但第二个div仍然打开，我无法弄清楚如何关闭它。您可以在此图片上看到，点击“国家/地区”div并打开http://prntscr.com/2g4dmw，然后点击“质量”，它会打开http://prntscr.com/2g4duf但我无法关闭它。我使用这段代码：

<script>
$(document).ready(function(){

        $("div #industry").click(function(){
                $("div #stars").hide();
                $("div #countries").hide();
                $("div #industries").fadeIn('500');

            });

        $("div #star").click(function(){
                $("div #industries").hide();
                $("div #countries").hide();
                $("div #stars").fadeIn('500');
            });

        $("div #country").click(function(){
                $("div #industries").hide();
                $("div #stars").hide();
                $("div #countries").fadeIn('500');
            });

    });

如果您需要更多信息，请随时提出任何帮助。

Answer 1

问题是你正在关闭整个div，而你应该为每个部分都有这样的结构：

<a href="#" id="countryLink">Countries</a>
<div id="countries"></div>
<a href="#" id="industryLink">Industry</a>
<div id="industries"></div>
<a href="#" id="stars">Stars</a>
<div id="stars"></div>

然后绑定到链接的点击而不是div本身，这样链接就会保留在那里，这样你就可以再次点击它们来打开它。

 $(document).ready(function(){

    $("#industryLink").click(function(){
            $("div #stars").hide();
            $("div #countries").hide();
            $("div #industries").fadeIn('500');

        });

    $("#starsLink").click(function(){
            $("div #industries").hide();
            $("div #countries").hide();
            $("div #stars").fadeIn('500');
        });

    $("#countryLink").click(function(){
            $("div #industries").hide();
            $("div #stars").hide();
            $("div #countries").fadeIn('500');
        });

});

Answer 2

http://jsfiddle.net/n8rwA/

$(document).ready(function(){

    $("#industry").click(function(){
            $("#stars").hide();
            $("#countries").hide();
            $("#industries").slideToggle( "slow" );

        });

    $("#star").click(function(){
            $("#industries").hide();
            $("#countries").hide();
            $("#stars").slideToggle( "slow" );
        });

    $("#country").click(function(){
            $("#industries").hide();
            $("#stars").hide();
            $("#countries").slideToggle( "slow" );
        });

});

您可以使用切换功能或滑动切换。

Answer 3

H i，

考虑此标记

 <div class="contentcontainer">
  <h3>Country</h3>
    <div class="content">
       I am the content for country
     </div>
 </div>

 <div class="contentcontainer">
  <h3>Industry</h3>
    <div class="content">
       I am the content for Industry
     </div>
 </div>

 <div class="contentcontainer">
  <h3>Stars</h3>
    <div class="content">
       I am the content for Stars
     </div>
 </div>

您的 javascript 可以缩短为：

    $(".contentcontainer").on("click", function() {
       $(".content").each(function() { $(this).hide(); });
       $(this).find(".content").show();
    });

点击事件将首先隐藏所有其他内容面板，然后显示您“点击”的内容。

Answer 4

上面的答案很好，所以我认为不需要另外的具体答案。我想一般解构问题，看看为什么提供了一些答案。听起来你有两个互动需求：

用户可以取消隐藏或隐藏DIV
1. DIV可以重新（隐藏）
当执行隐藏/取消隐藏操作时，所有其他DIV都隐藏

将其分解可以帮助您自己澄清您正在尝试做什么，并使解决问题变得更容易。

最初的实现涉及＃2以及＃1的一半。当我们查看答案时，您会看到各种解决方案，这些解决方案分别处理每个解决方案（从原始代码中进行或多或少的重构）。

@Amel Salibasic的建议为您的具体案例解决了2个，然后是1个。 @Rob Sedge可能更强大，因为它也解决了1.1。如果您还使用div作为触发器，一旦隐藏它，DIV就不应该在浏览器中可见，以便再次单击并显示它。所以，你通常应该使用别的东西来触发这种效果（比如标题）。

通常，尝试打破完整交互应该如何工作的各个步骤，考虑它们是否可以分组（隐藏/取消隐藏目标div是同一枚硬币的两面），然后尝试解决它们。

用js关闭/隐藏div

4 个答案: