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

編集: アイデアは、「hidden」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 に答える