0

我从某个网站上提取了一个（工作）jquery 下拉列表，但我真的不明白为什么它不适用于我的页面，这是我的代码：

Head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".hidden").hide();
  //toggle the componenet with class msg_body
  jQuery(".row").click(function()
  {
    jQuery(this).next(".hidden").slideToggle(500);
  });
});
</script>


Body:
    <div id="likelyToBeWarned">
    <div id="likelyOddHeader" class="row">
        <div id="likelyOddA" class="left">Test</div>
        <div id="LikelyOddB" class="middle"><img class="middle" src="image002.png"/></div>
        <div id="timeZone" class="right">West</div>
        <div id ="rows" class="hidden">
            <div id="weights" class="left">Weights:</div>
            <div id="values" class="middle">ValueA:1234  ValueB:12345 ValueC:123456 ValueD:7654321</div>
            <div id="dbWeights" class="right">dbWeightA: 1234 dbWeightB:12345 dbWeightC:123456 dbWeightD:7654321</div>
        </div>



style/css

.hidden{
 position:relative;
 display: table-row;
 height:45px;
 margin-left:auto;
 margin-right:auto;
}

.left{
    display: table-cell;
}

.right{
display: table-cell;
}

.middle{
display: table-cell;
cursor:pointer;
}
.row{
 display: table-row;
 height:45px;
 margin-left:auto;
 margin-right:auto;
}

编辑：想法是将“隐藏” div 显示为“likelyOddHeader” div 的下拉列表。

谢谢你的帮助。

4

3 回答 3

2

您的 HTML 代码中缺少一个结束 div

<div id="likelyOddHeader" class="row">
    <div id="likelyOddA" class="left">Test</div>
    <div id="LikelyOddB" class="middle">blablah</div>
    <div id="timeZone" class="right">West</div>
</div> <---------------------------HERE 
<div id ="rows" class="hidden">
        <div id="weights" class="left">Weights:</div>
        <div id="values" class="middle">ValueA:1234  ValueB:12345 ValueC:123456 ValueD:7654321</div>
        <div id="dbWeights" class="right">dbWeightA: 1234 dbWeightB:12345 dbWeightC:123456 dbWeightD:7654321</div>
</div>​

我在小提琴中添加了那个div，它工作正常http://jsfiddle.net/CZjZs/1/

于 2012-06-05T19:53:37.757 回答
1

此行jQuery(this).next(".hidden")返回空集作为this元素.row，并且.hidden他的孩子不是兄弟姐妹。

采用

jQuery(this).children(".hidden")

或者

jQuery(this).find(".hidden")

或将.hidden元素移动为的兄弟.row

于 2012-06-05T19:48:31.793 回答
0

你的jQuery：

jQuery(".row").click(function() { jQuery(this).next(".hidden").slideToggle(500); });

.row 是指一个类。您的 html 显示一个 id.. 所以它应该是：

$('#row').click(function(){
  $(this).slideToggle(500);
});

#row (this) 与 html 中的 .hidden 位于同一行。您要么专注于 id (#row) 或类 (.hidden)，然后在其上进行 slideToggle。

jQuery(this).next(".hidden").slideToggle(500);
于 2012-06-05T20:20:59.763 回答