jQuery slideToggle для нескольких divs

То, что я пытаюсь сделать, это иметь четыре ссылки, каждая из которых будет отображать и скрывать определенный div при нажатии. Я использую slideToggle, и мне удалось заставить его работать с действительно неаккуратным и повторяющимся кодом. Мой друг дал мне сценарий, который он использовал, и я попробовал его и, наконец, смог что-то добиться. Тем не менее, все, что он делает, - это скрыть div и не будет повторно отображаться. Также он скрывает все div, а не только конкретные. Вот что я сделал. Надеюсь, вы, ребята, можете понять, что я пытаюсь сделать и помогать! Большое спасибо.jQuery slideToggle для нескольких divs

Вот сценарий, который я использую.

$(document).ready(function() { 
$(".click_me").on('click', function() { 
    var $faq = $(this).next(".hide_div"); 
    $faq.slideToggle(); 
    $(".hide_div").not($faq).slideUp(); 
}); 
});

http://jsfiddle.net/uo15brz1/

источник

2014-12-11 Nick

Вот ссылка на скрипку. http://jsfiddle.net/uo15brz1/7/

Я немного изменил вашу разметку, добавив атрибуты идентификатора в свои div. Jquery, получает атрибут имени из ссылки, которая нажата, добавляет # в начало, скрывает видимый div, а затем переключает соответствующий div. Я также добавил e.preventDefault, чтобы остановить браузер от навигации из-за изменения хэша. В стороне, javascript не требует префикса $.

$(document).ready(function() { 
    $(".click_me").on('click', function (e) { 
     e.preventDefault(); 
     var name = $(this).attr('name'); 
     var target = $("#" + name); 
     if(target.is(':visible')){ 
      return false; //ignore the click if div is visible 
     } 
     target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo 
     $('.hide_div').slideUp(); //hide all divs on link click 
     target.slideDown(); // show the clicked one 
    }); 
});

источник

2014-12-11 01:29:14 quid

Большое спасибо за его работу, как я думал. То, что я хочу сделать, это то, что одновременно может показывать только один div. Например, я хочу, чтобы обо мне показывали при загрузке, как есть, а остальные 3 были скрыты. Если я нажимаю на проекты, я хочу, чтобы все остальные divs спрятались, а другой - для просмотра. Вы понимаете, что я пытаюсь сказать? – Nick

Почему переменные js не должны начинаться с $? Это чрезвычайно полезное соглашение, указывающее, что ссылка указывает на объект jQuery. Это делает код более читаемым. – Ben

@ Ник, я отредактировал свой ответ, так что за один раз видно только один div. – quid

Добро пожаловать в переполнение стека!

Вот скрипка:

http://jsfiddle.net/uo15brz1/2/

В принципе, вам нужен способ, чтобы указать на соответствующий контент <div> основы по ссылке, которую щелкнули. Было бы сложно сделать это с помощью вашей текущей разметки, поэтому я ее отредактировал. Примеры в документации jquery довольно хороши. Проведите некоторое время, изучая их, это отличный способ начать работу.

источник

2014-12-11 01:37:44 Ben

jQuery slideToggle для нескольких divs

ответ

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