Question

我的问题： http://www.danieldoktor.dk/test2/test2.html

当您按下任一设置按钮时，它会触发两个框。

我想要一个整体代码来控制按钮和向下滑动框，其代码与此类似，它们分别控制每个框而不是控制它们：

$(".someBtnClass").click(function () { 
        if(!$(".someBoxClass").hasClass('header-down')){
            $(".someBoxClass").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
        }
        else{
            $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
        }

    }); 


    $(document).click(function() {
        if($(".someBoxClass").hasClass('header-down')){
            $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }
    });

    $(".someBoxClass").click(function(e) {
        e.stopPropagation(); // This is the preferred method.
               // This should not be used unless you do not want
                             // any click events registering inside the div
    });

可以用课程来完成吗？

如果没有，怎么做，所以这些盒子，以后可以加载php？

修改

我的加价： HTML

<div class="lists">
        <header class="box_header" id="box1">
            <h1>HEADER 1</h1>
            <div class="setting" id="btn1"></div>
            </header>
 </div>

 <div class="lists">
        <header class="box_header" id="box2">
            <h1>HEADER 2</h1>
            <div class="setting" id="btn2"></div>
            </header>
 </div>

的jQuery

$(".setting").each(function(){
    $(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
        $(".box_header").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }});
});


$(document).click(function() {
    if($(".box_header").hasClass('header-down')){
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});

$(".box_header").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
           // This should not be used unless you do not want
                         // any click events registering inside the div
});

Answer 1

你是选择器抓住两者。您需要告诉它只抓住父级并为其设置动画，而不是抓住“box-header”类并为其设置动画

使用Javascript：

$('.setting').on('click', function() {
    var parent = $(this).parent();
    if (!parent.hasClass('header-down')) {
        parent.stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    } else {
        parent.stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }
});

JSFiddle：http://jsfiddle.net/jeffshaver/kHV8V/1/

Answer 2

不知道你的化妆，你可以尝试这样的事情：

var box = $(this).parents("div.parent_class").find('.someBoxClass');

然后用框

替换$（'。someBoxClass'）

Answer 3

您的标记是这样的（您应该将此添加到您的问题中）

<header id="box1" class="box_header">
   <h1>HEADER 1</h1>
   <div id="btn1" class="setting"></div>
</header>

每个盒子。因此，如果您点击.setting，您只想为正确设置按钮的.box_header（父级）设置动画，我猜是吗？

$(".setting").on("click", function(){
   if(!$(this).parent().hasClass('header-down')){
      $(this).parent().stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
   } else{
      $(this).parent().stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
   }
});

}）;

Answer 4

jQuery代码的修改版本

// widget 1

 $("#btn1").each(function(){
    $(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }});
});


 $("#btn2").each(function(){
    $(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
        $("#box2").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }});
});

$(document).click(function() {
    if($(".box_header").hasClass('header-down')){
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});

$(".box_header").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
           // This should not be used unless you do not want
                         // any click events registering inside the div
});

Demo

Answer 5

click事件应该使用设置按钮的“ID”注册，而不是使用css类注册，因为它将应用于所有匹配的元素。创建一个传递该特定元素的函数，并用$（元素）替换$（“。someBoxClass”）。例如，

$('#btn1').click(function(){animate(this)});

function animate(element){
$(element).stop().....
}

Answer 6

您应该使用ID而不是类。

$("#box1").click(function () { 

$("#box2").click(function () {

我认为这就是你想要的：http://jsfiddle.net/MTcvu/

你会如何使这些按钮工作？

6 个答案: