0

我的问题： 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
});
4

6 回答 6

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/

于 2013-02-26T12:17:45.447 回答
0

您应该使用 ID 而不是类。

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

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

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

于 2013-02-26T12:21:52.623 回答
0

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

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

});

于 2013-02-26T12:12:51.580 回答
0

在不知道你的标记的情况下，你可以尝试这样的事情：

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

然后用 box 替换 $('.someBoxClass')

于 2013-02-26T12:09:11.200 回答
0

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

演示

于 2013-02-26T12:14:07.127 回答
0

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

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

function animate(element){
$(element).stop().....
}
于 2013-02-26T12:18:28.787 回答