带有隐藏下拉列表的jQuery帮助_Jquery_Html_Css

带有隐藏下拉列表的jQuery帮助

jquery html css

带有隐藏下拉列表的jQuery帮助,jquery,html,css,Jquery,Html,Css,好的，WebDev社区的朋友们，我只是在这里胡闹，我在点击第二个div以隐藏原始div时遇到了问题我想让它保持相同的尺寸，只允许一个标签被点击和显示。我对jQuery仍然很粗糙，因此非常感谢您的帮助我已将所有内容格式化为内联格式，以显示所有代码，提前谢谢 WDH <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js">&l

好的，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>


$（文档）.ready（函数（）{
$（“.clickOnePara”）。单击（函数（）{
$（“.divOneDropdown”）.slideToggle（999）；
});
});
$（文档）.ready（函数（）{
$（“.clickTwoPara”）。单击（函数（）{
$（“.divtwo下拉列表”）.slideToggle（999）；
});
});
.divone下拉列表，.clickOnePara{
背景：无重复滚动0 0#E5EECC；
边框：1px实心#C3C3；
光标：指针；
保证金：0；
填充物：5px；
位置：相对位置；
文本对齐：居中；
顶部：5px；
}
.点击一段{
宽度：20%；
浮动：左；
}
.divtwo下拉列表，。单击两个段落{
背景：无重复滚动0 0#E5EECC；
边框：1px实心#C3C3；
光标：指针；
保证金：0；
填充物：5px；
位置：相对位置；
文本对齐：居中；
顶部：5px；
}
.点击两个段落{
宽度：20%；
浮动：左；
左：4px；
}
.Divone下拉列表{
显示：无；
高度：200px；
位置：相对位置；
顶部：30px；
}
.divtwo下拉列表{
显示：无；
高度：200px；
位置：相对位置；
顶部：30px；
}
#包含{
边框：黑色实心2px；
宽度：800px；
高度：600px；
位置：相对位置；
保证金：自动；
}
#顶部导航{
位置：绝对位置；
左：200px；
宽度：100%；
填充底部：30px；
}
#contentDrops{
填充顶部：20px；
}
显示/隐藏分区1
显示/隐藏分区2
诸如此类。诸如此类。第一节
诸如此类。诸如此类。第二节

像这样的

我试过：

$（.divTwoDropdown”）.hide（）

和

$（“.divOneDropdown”）.hide（）分别为。我真的很喜欢你给我看的流@kei，谢谢！我将如何设置它以使第一个div在加载时可见？再次感谢@kei，我似乎总是把事情复杂化。
$(".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);
    }
});