用于隐藏/显示div的Javascript if/else语句

我有两个div，在单击相应的图像链接之前，它们是隐藏的。按原样，两个div可以通过点击一个然后点击另一个来同时显示，我不希望这样。我试图写一个if语句，说明如果一个被点击，另一个将不会显示，但我没有运气。下面是我使用的javascript，它不起作用：

 $("#about").click(function () {
    if ($("#aboutdetails").fadeIn("slow") == 'true') {
    $("#contact").css({'display': 'none'});
    }
$("#aboutdetails").click("slow",function () {
        $(this).hide();     
    });
});


$("#contact").click(function () {
    if ($("#contactdetails").fadeIn("slow") == 'true') {
    $("#about").css({'display': 'none'});
    }
$("#contactdetails").click("slow",function () {
        $(this).hide();
    });
});

这是我尝试if语句之前的原始代码：

 $("#about").click(function () {
    $("#aboutdetails").fadeIn("slow", function() {
    $("#aboutdetails").click("slow",function () {
            $(this).hide();
        });
    });
});


$("#contact").click(function () {
   $("#contactdetails").fadeIn("slow", function() {
    $("#contactdetails").click("slow",function () {
           $(this).hide();
        });
   });
});

两者都不是很有说服力，因为我还在学习

---

提前感谢您的帮助

您可以使用以下方法检查另一个是否可见：

$('#blabla').is(':visible')

---

它将返回真或假

因此您有两个不同的div，分别名为“div1”和“div2”，其中包含链接“link1”和“link2”

这就是你想做的吗？单击link1->显示div1，隐藏div2。单击link2->show div2 hide div1

我不确定这是否是你想要的。如果没有，请尝试澄清您的问题

使用站点中的代码示例进行编辑：尝试以下操作

$("#about").click(function () {
  $("#aboutdetails").fadeIn("slow", function() {

  });
  $("#contactdetails").hide();
});


$("#contact").click(function () {
$("#contactdetails").fadeIn("slow", function() {

});
$("#aboutdetails").hide();
});

$("#aboutdetails").click(function() {
   $("#aboutdetails").hide();
});
 $("#contactdetails").click(function() {
    $("#contactdetails").hide();
});

---

这是一个棘手的问题，因为您处理的是单击时会触发的单击事件，并且您无法控制用户单击div的时间，但是您可以做的是切换，如果用户单击一个，则会使其可见并隐藏另一个

这是它的代码

$("#about").click(function () {
 $("#aboutdetails").fadeIn("slow", function() {
  $("#contactdetails").hide();
  $("#aboutdetails").click("slow",function () {
   $(this).hide();
 });
 });
});


$("#contact").click(function () {
   $("#contactdetails").fadeIn("slow", function() {
    $("#aboutdetails").hide();
    $("#contactdetails").click("slow",function () {
     $(this).hide();
    });
  });
});

实际上。。。将

类

（例如：

.box

）用于内容，将

ID

仅用于按钮，会简单得多：

  <ul id="nav">
    <li id="about">ABOUT</li>
    <li id="contact">CONTACT</li>
  </ul>
  
  <div class="box aboutdetails">
    About details here..........
  </div>
  
  <div class="box contactdetails">
    Contact details here..........
  </div>

此脚本的作用是：

• 在任何按钮上，单击隐藏所有

  .box

• 注册单击按钮的ID（

  this.ID

  ），并搜索具有类似按钮

  ID

  +

  详细信息

---

不错吧？

M.莱恩：是的，这正是我想要实现的目标……我会尝试一下这些建议，然后马上回来。谢谢如果div1是可见的，你点击link1，你想让它隐藏div1还是保持打开？我给你的密码会让它保持开放的状态谢谢。这是可行的，但我再也不能通过点击div的内部来关闭它了——我使用jquery.min.js来完成这一点……我试图调整你的代码来实现这一点，但没有运气……我在最后一个问题上遇到了一个错误……试图找到问题我解决了它……非常感谢你……看起来效果非常好！我在您的代码中添加了一个编辑尝试以下内容：

$（“#about”）。单击（aboutandler）$（“#联系人”）。单击（contactHandler）；函数aboutHandler（event evt）{$（“#contactdetails”）.hide（）；$（“#aboutdetails”）.fadeIn（“slow”）；$（“#aboutdetails”）.click（函数（）{$（this.hide（）；}）函数contactHandler（event evt）{$（“#aboutdetails”）.hide（）；$（“#contactdetails”）.fadeIn（“slow”，函数（）{$（this.）。click（函数（））{$（this）.hide（）}）；}

谢谢，Roko。我正试图通过实施M.Laing的想法来坚持我已经拥有的东西。我想我们已经接近成功了：）@user1505573这将允许你隐藏打开的一个。

  <ul id="nav">
    <li id="about">ABOUT</li>
    <li id="contact">CONTACT</li>
  </ul>
  
  <div class="box aboutdetails">
    About details here..........
  </div>
  
  <div class="box contactdetails">
    Contact details here..........
  </div>

$('#nav li').click(function(){              // any li 'button'
  $('.box').hide();                         // hide opened
  $('.'+this.id+'details').fadeIn(600);     // this.id will take the button's ID
});