Javascript 使用js关闭/隐藏div

大家好，新年快乐

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

当我点击一个div两次时，我希望它关闭。我可以打开第二个div，它会关闭第一个div，但是第二个div仍然打开，我不知道如何关闭它。你可以在这张图片上看到，我点击“国家”div，它打开了，然后点击“质量”，它打开了，但我无法关闭它。我使用以下代码：

<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');
            });

    });

$（文档）.ready（函数（）{
$（“div#industry”）。单击（函数（）{
$（“div#stars”）.hide（）；
$（“div#countries”）.hide（）；
美元（“div#industries”）.fadeIn（'500'）；
});
$（“div#star”）。单击（函数（）{
$（“div#industries”）.hide（）；
$（“div#countries”）.hide（）；
美元（“div#stars”）.fadeIn（'500'）；
});
$（“div#country”）。单击（函数（）{
$（“div#industries”）.hide（）；
$（“div#stars”）.hide（）；
美元（“div#countries”）.fadeIn（'500'）；
});
});

---

如果您需要更多信息，请随时询问。我非常感谢您的帮助。

问题是您正在关闭整个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>

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

hi

考虑这个标记

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

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

---

以上回答很好，因此我认为这里不需要另一个具体的答案。我想大致解构一下这个问题，看看为什么会提供一些答案。听起来您有两个交互需求：

用户可以取消隐藏或隐藏DIV

可以重新-（取消）隐藏DIV

执行隐藏/取消隐藏操作时，所有其他div都将隐藏

分解它可以帮助你自己弄清楚你想做什么，并使问题更容易解决

最初的实现处理了#2以及#1的一半。当我们看到答案时，您会看到各种解决方案分别处理每一个问题（或多或少地从原始代码重构）

@Amel Salibasic的建议为您的具体案例解决了2，然后是1@Rob Sedge的可能会更健壮，因为它也解决了1.1。；如果同时将div用作触发器，则一旦将其隐藏，该div就不应在浏览器中可见，无法再次单击并显示。因此，您通常应该使用其他东西来触发这种效果（如标题）

---

一般来说，尝试打破完整的交互应该如何工作的各个步骤，考虑它们是否可以被分组（隐藏/不隐藏目标div是同一个硬币的两面），然后尝试解决它们。p> 你看过jQueryUI手风琴吗？不知道你是什么意思我没有做过这个我不太确定你想在这里实现什么。是否要单击某个图元使其可见？但是，如果它不可见，您希望如何单击它？你能用你目前所拥有的创造一把小提琴吗？看看这个。我不确定，但我想这就是你要找的。Tnx我会用这个bcs很简单：）谢谢你的Answere:）谢谢你的Answere:）

$(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" );
        });

});

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

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