JQuery: Нажмите, чтобы скрыть DIV, как я могу сделать одну функцию, чтобы нажимать и скрывать отдельные элементы?

Question

У меня есть несколько div, как показано ниже.Я хочу 1 (один) JQuery функцию, которая щелкает по Ahref (.hide), Скрыть данные внутри <div class="data">.1. Это должна быть 1 функция, которая может скрывать несколько DIV2. Было бы неплохо объяснить, если использовать селектор jquery this, я подозреваю, что это то, что мне нужно.3. Держите это просто!4. Также был бы неплохой эффект скользящего переключения, чтобы скользить вверх и вниз по клику.

Я пытался это сделать, но мне приходилось делать разные jquery-код для каждого div, который ... long .. Спасибо за любую помощь !!и, надеюсь, правильные ответы !!

<code><div id="uniqueDiv1" class="frame">
    <a href="#" class="hide">Hide</a> // On click of this Div
        <div class="data">
            <pre>data

// Скрыть этот Div или данные Скрыть // При нажатии на этот Div

data

// Скрыть этот Div или данные Я хочу 1 простую функцию Jquery DOM для всех множественных Div

Answer 1

Вы можете это так:

$('div.frame a.hide').click(function(e){
   e.preventDefault();
   $(this).next('div.data').toggle(); 
});

http://jsfiddle.net/niklasvh/QbDMs/

• $('div.frame a.hide') выбирает все «скрытые» ссылки.
• e.preventDefault(); предотвращает действие ссылки по умолчанию
• $(this).next('div.data').toggle(); выбирает следующий div с помощью class="data" и переключает его видимость

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

if ($(this).text()=='Show'){
     $(this).text('Hide');   
    }else{
     $(this).text('Show');   
}

создание окончательного кода:

$('div.frame a.hide').click(function(e){
   e.preventDefault();
   var div =$(this).next('div.data').slideToggle(); 
    if ($(this).text()=='Show'){
     $(this).text('Hide');   
    }else{
     $(this).text('Show');   
    }
});

Answer 2

$("a.hide").click(function(){
   $(this).parent().find(".data").slideToggle();
});

Это должно работать.this относится к пункту, на который нажали.Он просто находит .data в родительском div и slideToggle s it.

fiddle: http://jsfiddle.net/yJfbP/

ПРИМЕЧАНИЕ. Ваш HTML в вашем сообщении искажен.У вас есть </pre>, где вы должны заканчивать div.

Answer 3

Попробуйте это:

$(".frame .hide").click(function(){
    var $this = $(this);
    var txt = $this.text();
    if(txt == "Hide"){
        $this.text("Show");
    } else {
        $this.text("Hide");
    }
    $this.next(".data").toggle();
});

Answer 4

$(document).ready(function(){
    $('.hide').click(function()) {
        $(this).next().hide();
    });
});