您将如何使这些按钮起作用？

Question

My problem: http://www.danieldoktor.dk/test2/test2.html

when you push either of the settings buttons it triggers both of the boxes.

I would like an overall code to control the button and the slide-down-and-up-box with a code similar to this, which controls each of the boxes individually instead of controlling them both:

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

Can this be done with a class?

If not, how can it be made, so the boxes, later can be loaded with php?

EDIT

My markup: 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

You're selector is grabbing both. You need to tell it to only grab the parent and animate it, instead of grabbing the "box-header" class and animating it

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

whithout knowing your markup you can try something like this:

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

then replace $('.someBoxClass') with box

Answer 3

Your markup is like this (you should have added this to your question)

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

for each box. So if you click on .setting you want to animate only the .box_header (parent) of the correct settings button, I presume?

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

Modified version of your jQuery Code

// 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

The click event should be registered with the "ID" of the setting button and not with the css class, as it will apply to all the matched elements. Create a function passing that particular element and replace your $(".someBoxClass") with $(element). For example,

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

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

Answer 6

You should use ID instead of class.

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

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

I think this is what you want: http://jsfiddle.net/MTcvu/