Javascript 你将如何着手使这些按钮工作？

我的问题是：

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

我想要一个整体代码来控制按钮和上下滑动框，代码类似于此，它单独控制每个框，而不是同时控制它们：

$(".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

---

在不了解标记的情况下，您可以尝试以下方法：

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

然后将$（'.someBoxClass'）替换为box

您的标记如下（您应该将其添加到问题中）

---

}))

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
});

---

您的选择器正在同时抓取这两个选项。您需要告诉它只抓取父对象并设置其动画，而不是抓取“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');
    }
});

---

jsiddle:

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

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

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

---

您应该使用ID而不是类

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

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

---

我想这就是你想要的：

尝试使用类名的id instate$（#btn1）和$（#btn2）我将只发布我的代码，因为我不知道如何添加您发布的代码。是的，对不起，但我现在添加了标记。但这成功了，非常感谢！！！！！这一直是我的麻烦！再次感谢！

// 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
});

$('.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');
    }
});

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

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

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

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