Question

WebDev社区的朋友们，我只是在这里瞎逛，我在点击隐藏原始div时遇到第二个div有问题。

我希望它保持相同的尺寸，只允许点击和显示一个标签。我仍然在jQuery的边缘粗糙，所以任何帮助都将非常感激。

我已将所有内联格式化以显示所有代码，提前致谢。

WDH

<html>

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$(".clickOnePara").click(function(){
    $(".divOneDropdown").slideToggle(999);
  });
});

</script>

<script type="text/javascript">

$(document).ready(function(){
$(".clickTwoPara").click(function(){
    $(".divTwoDropdown").slideToggle(999);
  });
});

</script>

<style type="text/css">

.divOneDropdown, .clickOnePara {
  background: none repeat scroll 0 0 #E5EECC;
  border: 1px solid #C3C3C3;
  cursor: pointer;
  margin: 0;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 5px;
}

.clickOnePara{
  width: 20%;
  float: left;
}

.divTwoDropdown, .clickTwoPara {
  background: none repeat scroll 0 0 #E5EECC;
  border: 1px solid #C3C3C3;
  cursor: pointer;
  margin: 0;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 5px;
}

.clickTwoPara{
  width: 20%;
  float: left;
  left: 4px;
}

.divOneDropdown {
  display: none;
  height: 200px;
  position: relative;
  top: 30px;
}

.divTwoDropdown {
  display: none;
  height: 200px;
  position: relative;
  top: 30px;
}

#contained{
  border: black solid 2px;
  width: 800px;
  height: 600px;
  position: relative;
  margin: auto;
}

#topNavs{
  position: absolute;
  left: 200px;
  width: 100%;
  padding-bottom: 30px;
}

#contentDrops{
  padding-top: 20px;
}

</style>

</head>

<body>

  <div id="contained">

    <div id="topNavs">
      <p class="clickOnePara">Show/Hide Div 1</p>
      <p class="clickTwoPara">Show/Hide Div 2</p>
    </div>

    <div id="contentDrops">
      <div class="divOneDropdown">
        <p>Blah... .. . Blah... .. . Section 1</p>
      </div>

      <div class="divTwoDropdown">
        <p>Blah... .. . Blah... .. . Section 2</p>
      </div>
    </div>

  </div>

</body>
</html>

Answer 1

$(".clickOnePara").click(function() {
    $(".divOneDropdown").slideToggle(999);
    if ( $(".divTwoDropdown").css("display") != "none" ) {
        $(".divTwoDropdown").slideUp(999);
    }
});

$(".clickTwoPara").click(function() {
    $(".divTwoDropdown").slideToggle(999);
    if ( $(".divOneDropdown").css("display") != "none" ) {
        $(".divOneDropdown").slideUp(999);
    }
});

这样的东西？ http://jsfiddle.net/tqbMt/

隐藏下拉列表的jQuery帮助

1 个答案: