アコーディオン内に、bxSliderを入れても、表示されません。
<body>内 ```ここに言語を入力 <dl class="accordion"> <dt>タイトル1</dt> <dd> <ul class="slider"> <li><img src="./img/slider/slide_img01.jpg" alt="写真" /></li> <li><img src="./img/slider/slide_img02.jpg" alt="写真" /></li> </ul><!-- bxSlider --> <p>コンテンツ1内容コンテンツ1内容コンテンツ1内容コンテンツ1内容コンテンツ1内容</p> </dd> <dt>タイトル2</dt> <dd> <ul class="slider"> <li><img src="./img/slider/slide_img01.jpg" alt="写真" /></li> <li><img src="./img/slider/slide_img02.jpg" alt="写真" /></li> </ul><!-- bxSlider --> <p>コンテンツ2内容コンテンツ2内容コンテンツ2内容コンテンツ2内容コンテンツ2内容</p> </dd> <dt>タイトル3</dt> <dd> <ul class="slider"> <li><img src="./img/slider/slide_img01.jpg" alt="写真" /></li> <li><img src="./img/slider/slide_img02.jpg" alt="写真" /></li> </ul><!-- bxSlider --> <p>コンテンツ3内容コンテンツ3内容コンテンツ3内容コンテンツ3内容コンテンツ3内容</p> </dd> </dl> ``` jQuery ```ここに言語を入力 // Toggle $(function(){ $('.accordion dt').on( 'click', function(){ $(this).next().slideToggle(); $(this).toggleClass( 'active' ); }); });// bxSlider
jQuery(document).ready(function($){
$('.slider').bxSlider({
slideWidth: 400,
minSlides: 1,
moveSlides: 1,
slideMargin: 0,
pager: false
});
});
css ```ここに言語を入力 .accordion dt { background: #c99973; border: #FFF 1px solid; cursor: pointer; color: #fff; display: block; font-size: 14px; font-weight: bold; height: 50px; line-height: 50px; letter-spacing: -1px; margin: 0 auto; padding: 0; position: relative; text-align: center; } .accordion dt:after { background: #FFF; color: #c99973; border-radius: 5px; content: "\f107"; display: block; font-family: FontAwesome; font-size: 20px; height: 20px; line-height: 20px; margin: 0; padding: 0; right: 10px; position: absolute; text-align: center; top: 15px; width: 20px; } .accordion dt.active:after { background: #FFF; color: #c99973; border-radius: 5px; content: "\f106"; display: block; font-family: FontAwesome; font-size: 20px; height: 20px; line-height: 20px; margin: 0; padding: 0; right: 10px; position: absolute; text-align: center; top: 15px; width: 20px; } .accordion dd { display: none; margin: 10px auto; overflow: hidden; padding: 0; visibility: visible; }
CSS内に、
display:none;を外せば、bxSlider が表示されます。
代わりに、
script内に、
cssを代入したいのですが、
$(function(){ $('.accordion dt').on( 'click', function(){ $('dd').css('display', 'none'); $(this).next().slideToggle(); $(this).toggleClass( 'active' ); }); });
に入れても、開いたままになってしまいます。
ご教授お願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/26 06:58 編集