dd表示スタイルがnoneに変更

私はdlを持っていますが、実行するとdt要素が最初にクリックされたときに正常に動作しますが、ddスタイルは表示：noneに変更され、理由はわかりません。スタイルを変えないようにするにはどうすればいいですか？私は表示を追加しようとしました：ブロック！私のCSSとddタグ自体に重要ですが、それは動作しませんでした。ここでは（jQueryのは$(document).ready(function(){}にembdedされる）私のjQueryの、CSSとHTMLコードがあるdd表示スタイルがnoneに変更

setUpMenu(); 

function setUpMenu() { 
    $("dt").click(function(){ 
     $("dd").slideUp("fast"); 
     $(this).next().slideDown("fast"); 
    return false; 
    }); 
} 

<style> 
dt { 
    list-style: none; cursor: pointer; 
    background-color: #558C89; 
    width: 150px; height: 25px; 
    font-size: 1.1em; color: white; text-align: center; 
} 
dt:hover { 
     background-color: #D9853B; 
} 
dd { 
    text-decoration: none; 
} 
.otherMenu { 
    float: left; margin-left: 3%; 
} 
</style> 

<body> 
     <div class="otherMenu"> 
      <label>More items available:</label> 
      <dl> 
       <dt>Mounts</dt> 
       <dd>Picture</dd> 
       <dd>Photos</dd> 
       <dt>Shadow Boxes</dt> 
       <dt>Multi-frames +</dt> 
       <dd>2 picture</dd> 
       <dd>3 picture </dd> 
       <dd>4 picture</dd> 
       <dt>Posters frames</dt> 
       <dt>Artist frames</dt> 
       <dt>Classic posters</dt> 
       <dt>Accessories</dt> 
      </dl> 
     </div> 
    </body>

出典

2016-04-03 truly-daunting

それが原因でこの線のだ：それはddが表示されているとき、彼らが原因で非表示にすることになりますことを意味$("dd").slideUp("fast");

slideUp()機能。反対に、それを示すslideDown()です。

EDIT

私はあなたが次のdt要素

Like this

setUpMenu(); 

function setUpMenu() { 
    $("dt").click(function(){ 
     $("dd").slideUp("fast"); 
     $(this).nextUntil("dt", "dd").slideDown("fast"); 
    return false; 
    }); 
}

出典

2016-04-03 21:19:16

まで、すべてのddの要素を開くためにnextUntil()機能を使用することができます求めているものを正しく理解していれば、私はあなたの提案を試してみましたしかし、これは、dt要素がクリックされたときに閉じるのではなく、アコーディオンメニューのように私が望むものでした。 –

いいえ、私は私の答えを編集しました –

それはトリックでした！ありがとうございました！ –

dd表示スタイルがnoneに変更

答えて

関連する問題