jquery css显示菜单（打开一个菜单时关闭其他菜单）

我正在设计一个网页，我的想法是在上面有3个按钮，如果其中一个点击，在按钮下面会显示一个下拉菜单。 我遇到的问题是，如果出现并显示了一个菜单，则不知道如何告诉jquery，这是关闭的，我按了open，如果我按了与deslegado相同的键，这是关闭的

我试过了，但没用

$("#btn2").click(function (e) {
    if( $('.desplegable').css('display') == 'block' ) {
        $('.desplegable').slideUp(1000);    
    }

    $('#desplegable_right').slideToggle(1000);
}); 

我离开链接：

我已经看了关于Stackoverflow的其他问题，但我误解了/无法理解任何示例。 非常感谢

试试这个：

$("#btn1").click(function (e) {
    $('.desplegable').hide();
    $('#desplegable_left').slideToggle(1000);
});
$("#btn2").click(function (e) {
     $('.desplegable').hide();
    $('#desplegable_center').slideToggle(1000);
});
$("#btn3").click(function (e) {
     $('.desplegable').hide();
    $('#desplegable_right').slideToggle(1000);
});

试试这个：

$("#btn1").click(function (e) {
    $('.desplegable').hide();
    $('#desplegable_left').slideToggle(1000);
});
$("#btn2").click(function (e) {
     $('.desplegable').hide();
    $('#desplegable_center').slideToggle(1000);
});
$("#btn3").click(function (e) {
     $('.desplegable').hide();
    $('#desplegable_right').slideToggle(1000);
});

---

您可以使用相同的选择器。当用户单击按钮时，您需要捕捉该按钮的索引。然后添加太多的div''desplegable'类'将删除'或类似的内容。然后使用与单击按钮相同的索引从div中删除此类（将删除）。然后你就知道该怎么做了：）

你可以使用相同的选择器。当用户单击按钮时，您需要捕捉该按钮的索引。然后添加太多的div''desplegable'类'将删除'或类似的内容。然后使用与单击按钮相同的索引从div中删除此类（将删除）。然后你就知道该怎么做了：）

你可以稍微简化一下选择器：

// use one function for all buttons....
$('.button').click(function(e) {
    // i is current index of the clicked button, and curr
    // the current element.
    var i = $(this).index('.button'),
        curr = $('.desplegable').eq(i);
    // hide all elements (except the current element)
    $('.desplegable').not(curr).hide();
    // slide down the current one (this has only effect in case
    // the current one is invisible. Or in case you want to open
    // close the active one on click use slideToggle instead of slideDown
    curr.slideDown(1000);   
});

---

更新

您可以稍微简化选择器：

// use one function for all buttons....
$('.button').click(function(e) {
    // i is current index of the clicked button, and curr
    // the current element.
    var i = $(this).index('.button'),
        curr = $('.desplegable').eq(i);
    // hide all elements (except the current element)
    $('.desplegable').not(curr).hide();
    // slide down the current one (this has only effect in case
    // the current one is invisible. Or in case you want to open
    // close the active one on click use slideToggle instead of slideDown
    curr.slideDown(1000);   
});

更新

演示

将目标添加到您的按钮，这个小脚本将为您的按钮完成所有操作

*它还将关闭打开的菜单

JQUERY 演示

将目标添加到您的按钮，这个小脚本将为您的按钮完成所有操作

*它还将关闭打开的菜单

JQUERY 切换子面板的打开/关闭 我将从以下HTML开始：

<div class="button-wrap">
    <div id='btn1' class='button'>button1</div>
    <div id='btn2' class='button'>button2</div>
    <div id='btn3' class='button'>button3</div>
</div>
<div id='desplegable_left' class='desplegable btn1'>Left</div>
<div id='desplegable_center' class='desplegable btn2'>Center</div>
<div id='desplegable_right' class='desplegable btn3'>Right</div>

.button-wrap {
    outline: 1px dotted blue; /* Optional! for demo only */
    overflow: auto; /* This will make sure the floats 
                       don't inteact with .desplegable div's */
}

单击

。按钮

，获取

id

属性的值

然后，您可以使用组合的CSS选择器选择相应的目标元素，例如

.desplegable.btn1

，并检查CSS

display

属性值，查看它是“none”还是“block”，这分别对应于隐藏还是显示

如果目标元素被隐藏（

display:none

），则隐藏所有目标元素并打开感兴趣的元素

否则，只需切换或隐藏当前一个

我不确定您是否真的希望目标元素显示在按钮的右侧，然后在按钮行下方向下移动

您可以通过向父级添加

overflow:auto

来修复此问题，其中包含包装按钮的 如CSS中所示：

<div class="button-wrap">
    <div id='btn1' class='button'>button1</div>
    <div id='btn2' class='button'>button2</div>
    <div id='btn3' class='button'>button3</div>
</div>
<div id='desplegable_left' class='desplegable btn1'>Left</div>
<div id='desplegable_center' class='desplegable btn2'>Center</div>
<div id='desplegable_right' class='desplegable btn3'>Right</div>

.button-wrap {
    outline: 1px dotted blue; /* Optional! for demo only */
    overflow: auto; /* This will make sure the floats 
                       don't inteact with .desplegable div's */
}

小提琴演示位于：

切换子面板的打开/关闭 我将从以下HTML开始：

<div class="button-wrap">
    <div id='btn1' class='button'>button1</div>
    <div id='btn2' class='button'>button2</div>
    <div id='btn3' class='button'>button3</div>
</div>
<div id='desplegable_left' class='desplegable btn1'>Left</div>
<div id='desplegable_center' class='desplegable btn2'>Center</div>
<div id='desplegable_right' class='desplegable btn3'>Right</div>

.button-wrap {
    outline: 1px dotted blue; /* Optional! for demo only */
    overflow: auto; /* This will make sure the floats 
                       don't inteact with .desplegable div's */
}

单击

。按钮

，获取

id

属性的值

然后，您可以使用组合的CSS选择器选择相应的目标元素，例如

.desplegable.btn1

，并检查CSS

display

属性值，查看它是“none”还是“block”，这分别对应于隐藏还是显示

如果目标元素被隐藏（

display:none

），则隐藏所有目标元素并打开感兴趣的元素

否则，只需切换或隐藏当前一个

我不确定您是否真的希望目标元素显示在按钮的右侧，然后在按钮行下方向下移动

您可以通过向父级添加

overflow:auto

来修复此问题，其中包含包装按钮的 如CSS中所示：

<div class="button-wrap">
    <div id='btn1' class='button'>button1</div>
    <div id='btn2' class='button'>button2</div>
    <div id='btn3' class='button'>button3</div>
</div>
<div id='desplegable_left' class='desplegable btn1'>Left</div>
<div id='desplegable_center' class='desplegable btn2'>Center</div>
<div id='desplegable_right' class='desplegable btn3'>Right</div>

.button-wrap {
    outline: 1px dotted blue; /* Optional! for demo only */
    overflow: auto; /* This will make sure the floats 
                       don't inteact with .desplegable div's */
}

---

Fiddle演示位于：

但当central打开时，我单击另一个按钮时，不要关闭central并显示另一个，但当central打开时，我单击另一个按钮时，不要关闭central并显示另一个，但如果我单击同一个按钮，未关闭使用自定义属性将按钮元素连接到目标元素时打开的+1菜单。请再次检查更新代码谢谢Marc Audet。但是如果我单击相同的按钮，没有关闭使用自定义属性将按钮元素连接到目标元素而打开的+1菜单。请再次检查更新代码谢谢Marc Audet。我尝试了它，但不起作用$（“#btn_l2”）。单击（函数（e）{if（$（$）（“#desplegable_left”）.hasClass（'desplegado'）{$（'desplegado#desplegable#u left'）。slideUp（1000）$我尝试了它，但不起作用$（“#btn#l2”）。单击（函数（e）{如果（$）（“#desplegable#left'）。如果（$）（“#desplegable#left'）。hasClass（$）（#desplegado'）。{.slideUp（1000）；$（'desplegable_left'）.removeClass（'desplegado'）；}else{$（'desplegable'）.slideUp（1000）；$（'desplegable_left'）.slideDown（1000）；$（'desplegable_left'）.addClass（'desplegado'）；}）；我使用它，thanx Marc，但此解决方案不关闭打开的div，只是隐藏，当我尝试关闭“上一个”以打开另一个div不起作用时，只是为了确保我理解，您希望打开div以使用

.slideToggle

而不是

。隐藏
？我可以稍后再看一看，可能有一个技巧来确保动画事件是d不要同时开火。我使用它，thanx Marc，但是这个解决方案不关闭打开的div，只是隐藏，当我试图关闭上一个打开另一个div时不起作用只是为了确保我理解，你想打开div来关闭，使用
。slideToggle
而不是
。隐藏
？我可以稍后再看一看，可能有一个技巧可以让sure动画事件不会同时触发。