jQuery slideToggle с несколькими divs

Я пытаюсь скользить по нескольким div, но я не могу заставить его работать.jQuery slideToggle с несколькими divs

Я получил базовую функциональность, что я хочу в макете 2 сНа:

$(".replication").slideUp(500,function(){ 
    $(".duplication").slideToggle(500) 
});

Но мне нужно работать с 3-й или 4-дивами, а не только 2.

я почти чувствую, что код должен быть похож на это:

$(".replication").slideUp(500, function($(".duplication").slideUp(500,function()){  
    $(".thirdclass").slideToggle(500) 
});

Любая помощь приветствуется.

источник

2013-08-08 Nate Bradshaw

Предлагаю обертывать ваши изображения divs в контейнер и делать то же самое с вашими информационными div. Либо вы используете один и тот же контейнер или два отдельных - до вас. Затем используйте, когда щелкнуть изображение div, скрыть все ваши информационные div и показать только соответствующий div div, используя индекс div относительно контейнера. Вы можете использовать функцию index() jQuery. Это также упрощает ваш код.

источник

2013-08-08 22:37:07

вы можете дать мне пример? –

@NateBradshaw, попробуйте следующее: http://jsfiddle.net/frankfajardo/dWUry/ –

@NateBradshaw, мое решение на самом деле похоже на Moby's. Поэтому мне интересно узнать ваш комментарий к его решению. Если вы будете следовать одному и тому же шаблону при добавлении нового пункта меню, он должен работать с любым из наших решений. –

В принципе, вам необходимо сделать все общее, чтобы обрабатывать его с помощью обычной земли.

Во-первых, я хотел бы изменить разметку, чтобы быть что-то вроде этого, обратите внимание, что данные атрибуты:

<div class="dupImage img" data-menu="duplication"><img /></div> 
<div class="repImage img" data-menu="replication"><img /></div> 

<div class="menuitem" id="duplication"> 
    <h3>Duplication</h3> 
    <ul> 
     <li>CDs, DVDs or Blu-Rays</li> 
     <li>CDs, DVDs or Blu-Rays</li> 
    </ul> 
</div> 

<div class="menuitem" id="replication"> 
    <h3>Replication</h3> 
    <ul> 
     <li>CDs, DVDs or Blu-Rays</li> 
     <li>CDs, DVDs or Blu-Rays</li> 
    </ul> 
</div>

Затем конденсироваться ваш сценарий к чему-то вроде этого:

var menu; 
$(document).ready(function(){ 
    $('.menuitem').hide(); 
    $('.img').click(function() { 
     menu = $("#" + $(this).data("menu")); 
     $(".menuitem:not(#" + menu.attr("id") + ")").slideUp(500,function(){ 
      menu.slideDown(500); 
     }); 
    }); 
});

Вот скрипку:

http://jsfiddle.net/MXusL/1/

Я надеюсь, что это поможет s, удачи с вашим приложением!

источник

2013-08-08 22:43:31

Удивительно, но когда я добавляю третий пункт меню, функциональность полностью изменяется. это нежелательно, так как я хочу сохранить ту же функцию переключения слайдов/слайдов. http://jsfiddle.net/MXusL/2/ –

Я не уверен, что вы имеете в виду? http://jsfiddle.net/MXusL/3/ –

Основываясь на ответе Moby на небольшое улучшение, чтобы вы могли активировать активный, иначе вы не сможете закрыть его, как только он будет открыт.

http://jsfiddle.net/jhYq5/2/

var menu; 
$(document).ready(function() { 
    $('.menuitem').hide(); 
    $('.img').click(function() { 
     menu = $("#" + $(this).data("menu")); 

     $(".menuitem:not(#" + menu.attr("id") + ")").slideUp(); 
     menu.slideToggle(); 


    }); 
});

источник

2014-01-05 14:00:33 Benn

jQuery slideToggle с несколькими divs

ответ

Смежные вопросы