Как исправить этот jQuery slideToggle?

#jquery #slidetoggle

Вопрос:

Что я пытаюсь сделать, так это независимо перемещать текстовые разделы slidetoggle под рядом изображений при нажатии на эти изображения — в галерее dl / dt, вот так:

галерея dl и dt

Но, конечно, я делаю по крайней мере несколько вещей неправильно. Может быть сложно, что разметка находится на вкладке jQuery, но это может быть не так. jsfiddle здесь: http://jsfiddle.net/Yfs2V/8 /

Я думаю, что функция проблематична:

Функция jQuery:

 $(".bkcontent").hide();
$("#bookimggallery dt").click(function() {
    $(".bkcontent").hide();
$(this).parent().children(".bkcontent").slideToggle(500); });

HTML:

 <div id="bookimggallery">

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title One</dt></dl>

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title Two</dt></dl>

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title Three</dt></dl>

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title Four</dt></dl>

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title Five</dt></dl>

</div>

<div id="booktextdiv">

<div class="bkcontent">Lorum Ipsum....</div>

<div class="bkcontent">Lorum Ipsum....</div>

<div class="bkcontent">Lorum Ipsum....</div>

<div class="bkcontent">Lorum Ipsum....</div>

<div class="bkcontent">Lorum Ipsum....</div>

</div>

CSS:

 #bookimggallery { width: 600px; height:200px; margin:2px; text-align: center;}

dl.gallery {width: 93px; text-align: center; float: left;}

.gallery dt { width: 80px; margin-top:2px; font-size: .7em; text-align:center;}

#booktextdiv span {display:none}

*(omitted tabs CSS for clairity)*

Ответ №1:

Здесь возникает пара проблем. Я думаю, что основным из них являются селекторы, которые вы используете для доступа к щелчку по книге, а также ее текст, который, по-видимому, никак не связан с элементом book gallery.

Я немного изменил ваш код здесь

Основные изменения касаются HTML:

 <dl class="gallery" rel="one">

Добавьте rel="blahh" к dl каждой книге, это будет соответствовать текстовому div

 <div class="bkcontent" id="one">

Добавьте id="blah" к div , содержащему текст для книги

jQuery изменяется:

 $("#bookimggallery  dt").click(function() {
    $(".bkcontent").hide();
    var textid = $(this).parent('dl').attr('rel');
    $('#' textid).slideToggle(500); 
});

Теперь селектор выбирает все dt внутри div с помощью id="bookimggallery"

Затем он получает идентификатор из rel="blah" , затем slideToggle его.

Без полной перестройки вашего макета кода вот как я бы это сделал.

1. Спасибо, отличное исправление. Все еще изучаю jQuery. Одна из проблем, которую я обнаружил, заключается в том, что при полной загрузке страницы все .bkcontent divs будут отображаться как развернутые, поэтому я добавил $(".bkcontent").hide(); в doc ready функцию, которая скрывает CSS-вкладки до полной загрузки, и это сработало.

Ответ №2:

Ну, для одного ваш класс является bookimggallery и не imagegallerydiv является, для другого текст не является дочерним для ваших <dl> элементов, поэтому $(this).parent().children(".bkcontent") не содержит никаких элементов.

Ответ №3:

Проверяя эту ссылку, похоже, что ваше использование DL / DT / DD немного отклонено.

Рассмотрите возможность реорганизации вашего html для

 <dl>
  <dt class="gallery"><img alt="img" src="">Image Title One</dt>
  <dd> description text one</dd>

  <dt class="gallery"><dt><img alt="img" src="">Image Title Two</dt>
  <dd> description text two</dd>
</dl>

Тогда ваш jquery выглядел бы как

 $("dd").hide();
$("dt.gallery").click(function() {
  $("dd").hide(); // or $("dd:visible").slideToggle(500);
  $(this).next("dd").slideToggle(500);
});