单击另一个时，滑动关闭div

Question

好的，所以我确信显而易见的只是逃避我，但我有一个我正在努力的网站，我正在尝试让“额外”菜单作为div滑入视图。我遇到的问题是在单击下一个项目时让前一个div向下滑动。现在，当单击每个项目时，div会滑入视图并与另一个重叠。谁能告诉我我失踪了什么？以下是查看内容的链接：http://interbay.liveimagination.com/about.htm

这是我的HTML代码：

<div id="philosophyPopup">
<div id="philosophyDashboard">
<div id="philosophyInfo"><h1>Philosophy</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis sem at mauris vulputate sit amet vehicula diam ultrices. Nulla in magna eget mauris commodo tincidunt vel in leo. Sed non turpis libero. Duis posuere, nisi in semper sagittis, enim velit vestibulum leo, id consequat ligula odio id nunc. Nunc tempus tellus quis nulla molestie tempor. Pellentesque convallis dui a lectus vestibulum ultricies. Suspendisse congue, arcu vitae iaculis blandit, felis tortor eleifend lacus, vel facilisis nunc ipsum ut ipsum. Curabitur sed lorem at massa commodo ultricies eget vel sapien. Quisque sit amet odio massa, sed adipiscing velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas adipiscing turpis et urna cursus non sodales est tristique. Integer interdum, elit vel fermentum iaculis, justo est venenatis augue, sit amet pharetra magna diam id odio.
</p>
<p>Sed venenatis sagittis nibh, gravida eleifend est ullamcorper at. Ut et leo id leo placerat vehicula ac in tellus. Suspendisse volutpat luctus metus, consequat luctus mi dignissim at. Quisque non enim velit, imperdiet gravida nisi. Nam eget elit quis urna adipiscing porttitor eu non nunc. Ut in urna nec augue vestibulum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus cursus tortor vel augue rutrum molestie.
</p>
<p>Morbi faucibus dui sit amet massa commodo dictum. Praesent facilisis euismod ligula nec interdum. Sed tristique, tortor id blandit eleifend, eros nibh viverra ligula, a convallis velit metus vel turpis. Suspendisse lobortis lobortis sem, sed molestie neque aliquam eu. Curabitur et consequat dolor. Nullam magna orci, rutrum at luctus eget, sagittis non sapien. Etiam id fermentum lectus. Aliquam ut lacinia purus. Vestibulum lorem arcu, condimentum ac ullamcorper sed, vestibulum in sem. Vivamus tristique tortor ut sem congue dignissim suscipit nunc egestas.
</p>
<p>Mauris quam tellus, auctor at dictum at, laoreet a est. Phasellus ut metus nec dolor porta convallis. Nunc laoreet massa at purus aliquet ultrices. Aliquam erat volutpat. Sed ornare, enim vitae molestie tincidunt, est elit hendrerit sem, vel commodo eros ipsum non tellus. Nam nunc ante, dignissim eu pellentesque eget, ornare eget sapien. Pellentesque nec ipsum erat. Pellentesque consequat ipsum sed sem facilisis quis cursus nulla tempus. Suspendisse non ligula convallis lacus venenatis blandit. Cras eleifend consectetur tortor, eu cursus elit iaculis a. Nulla facilisi.
</p>
</div>
</div>
</div>

<div id="aboutusPopup">
<div id="aboutusDashboard">
<div id="aboutusInfo"><h1>About US</h1>
<p>Interbay Veterinary Care Center has been providing excellent medical care to pets in Magnolia and Queen Anne since 1974.  Our hospital is designed to provide clients and patients a veterinary experience unlike any they have had elsewhere.  In a profession without a widely accepted standard of care, practicing good, and modern medicine, is a choice for veterinarians. 
</p>
<p>
We have made that choice and strive to practice thorough, in-depth, current, and modern medicine.  We strongly encourage preventative medicine and take the time to fully inform our clients as to the nature of their pet's overall health.  Our doctors and staff engage in regular continuing education to keep informed of current developments in medicine, and we are confident that our patient care and client service is unsurpassed.
</p>
<p>Interbay Veterinary Care Center has been providing excellent medical care to pets in Magnolia and Queen Anne since 1974.  Our hospital is designed to provide clients and patients a veterinary experience unlike any they have had elsewhere.  In a profession without a widely accepted standard of care, practicing good, and modern medicine, is a choice for veterinarians. 
</p>
<p>
We have made that choice and strive to practice thorough, in-depth, current, and modern medicine.  We strongly encourage preventative medicine and take the time to fully inform our clients as to the nature of their pet's overall health.  Our doctors and staff engage in regular continuing education to keep informed of current developments in medicine, and we are confident that our patient care and client service is unsurpassed.
</p>
</div>
</div>
</div>

<div id="tourPopup">
<div id="tourDashboard">
<div id="tourInfo"><h1>Tour</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis sem at mauris vulputate sit amet vehicula diam ultrices. Nulla in magna eget mauris commodo tincidunt vel in leo. Sed non turpis libero. Duis posuere, nisi in semper sagittis, enim velit vestibulum leo, id consequat ligula odio id nunc. Nunc tempus tellus quis nulla molestie tempor. Pellentesque convallis dui a lectus vestibulum ultricies. Suspendisse congue, arcu vitae iaculis blandit, felis tortor eleifend lacus, vel facilisis nunc ipsum ut ipsum. Curabitur sed lorem at massa commodo ultricies eget vel sapien. Quisque sit amet odio massa, sed adipiscing velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas adipiscing turpis et urna cursus non sodales est tristique. Integer interdum, elit vel fermentum iaculis, justo est venenatis augue, sit amet pharetra magna diam id odio.
</p>
<p>Sed venenatis sagittis nibh, gravida eleifend est ullamcorper at. Ut et leo id leo placerat vehicula ac in tellus. Suspendisse volutpat luctus metus, consequat luctus mi dignissim at. Quisque non enim velit, imperdiet gravida nisi. Nam eget elit quis urna adipiscing porttitor eu non nunc. Ut in urna nec augue vestibulum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus cursus tortor vel augue rutrum molestie.
</p>
<p>Morbi faucibus dui sit amet massa commodo dictum. Praesent facilisis euismod ligula nec interdum. Sed tristique, tortor id blandit eleifend, eros nibh viverra ligula, a convallis velit metus vel turpis. Suspendisse lobortis lobortis sem, sed molestie neque aliquam eu. Curabitur et consequat dolor. Nullam magna orci, rutrum at luctus eget, sagittis non sapien. Etiam id fermentum lectus. Aliquam ut lacinia purus. Vestibulum lorem arcu, condimentum ac ullamcorper sed, vestibulum in sem. Vivamus tristique tortor ut sem congue dignissim suscipit nunc egestas.
</p>
<p>Mauris quam tellus, auctor at dictum at, laoreet a est. Phasellus ut metus nec dolor porta convallis. Nunc laoreet massa at purus aliquet ultrices. Aliquam erat volutpat. Sed ornare, enim vitae molestie tincidunt, est elit hendrerit sem, vel commodo eros ipsum non tellus. Nam nunc ante, dignissim eu pellentesque eget, ornare eget sapien. Pellentesque nec ipsum erat. Pellentesque consequat ipsum sed sem facilisis quis cursus nulla tempus. Suspendisse non ligula convallis lacus venenatis blandit. Cras eleifend consectetur tortor, eu cursus elit iaculis a. Nulla facilisi.
</p>
</div>
</div>
</div>

<div id="joinusPopup">
<div id="joinusDashboard">
<div id="joinusInfo"><h1>Join Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis sem at mauris vulputate sit amet vehicula diam ultrices. Nulla in magna eget mauris commodo tincidunt vel in leo. Sed non turpis libero. Duis posuere, nisi in semper sagittis, enim velit vestibulum leo, id consequat ligula odio id nunc. Nunc tempus tellus quis nulla molestie tempor. Pellentesque convallis dui a lectus vestibulum ultricies. Suspendisse congue, arcu vitae iaculis blandit, felis tortor eleifend lacus, vel facilisis nunc ipsum ut ipsum. Curabitur sed lorem at massa commodo ultricies eget vel sapien. Quisque sit amet odio massa, sed adipiscing velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas adipiscing turpis et urna cursus non sodales est tristique. Integer interdum, elit vel fermentum iaculis, justo est venenatis augue, sit amet pharetra magna diam id odio.
</p>
<p>Sed venenatis sagittis nibh, gravida eleifend est ullamcorper at. Ut et leo id leo placerat vehicula ac in tellus. Suspendisse volutpat luctus metus, consequat luctus mi dignissim at. Quisque non enim velit, imperdiet gravida nisi. Nam eget elit quis urna adipiscing porttitor eu non nunc. Ut in urna nec augue vestibulum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus cursus tortor vel augue rutrum molestie.
</p>
<p>Morbi faucibus dui sit amet massa commodo dictum. Praesent facilisis euismod ligula nec interdum. Sed tristique, tortor id blandit eleifend, eros nibh viverra ligula, a convallis velit metus vel turpis. Suspendisse lobortis lobortis sem, sed molestie neque aliquam eu. Curabitur et consequat dolor. Nullam magna orci, rutrum at luctus eget, sagittis non sapien. Etiam id fermentum lectus. Aliquam ut lacinia purus. Vestibulum lorem arcu, condimentum ac ullamcorper sed, vestibulum in sem. Vivamus tristique tortor ut sem congue dignissim suscipit nunc egestas.
</p>
<p>Mauris quam tellus, auctor at dictum at, laoreet a est. Phasellus ut metus nec dolor porta convallis. Nunc laoreet massa at purus aliquet ultrices. Aliquam erat volutpat. Sed ornare, enim vitae molestie tincidunt, est elit hendrerit sem, vel commodo eros ipsum non tellus. Nam nunc ante, dignissim eu pellentesque eget, ornare eget sapien. Pellentesque nec ipsum erat. Pellentesque consequat ipsum sed sem facilisis quis cursus nulla tempus. Suspendisse non ligula convallis lacus venenatis blandit. Cras eleifend consectetur tortor, eu cursus elit iaculis a. Nulla facilisi.
</p>
</div>
</div>
</div>

这是我的jquery：

<script type="text/javascript">
$(function() {
$('#philosophyOpen').click(function () {
    $('#philosophyPopup #philosophyDashboard').slideToggle({
      direction: "up"
    }, 300);
    $(this).toggleClass('philosophyClose');
  });  

$('#aboutusOpen').click(function () {
    $('#aboutusPopup #aboutusDashboard').slideToggle({
      direction: "up"
    }, 300);
    $(this).toggleClass('aboutusClose');
  });

$('#tourOpen').click(function () {
    $('#tourPopup #tourDashboard').slideToggle({
      direction: "up"
    }, 300);
    $(this).toggleClass('tourClose');
  });

$('#joinusOpen').click(function () {
    $('#joinusPopup #joinusDashboard').slideToggle({
      direction: "up"
    }, 300);
    $(this).toggleClass('joinusClose');
  });
}); 

</script>

以下是id元素：

<a id="philosophyOpen" class="philosophybtn"></a> <a id="aboutusOpen" class="teambtn"></a> <a id="tourOpen" class="tourbtn"></a> <a id="joinusOpen" class="joinusbtn"></a>

Answer 1

实现手风琴效果的方法有很多种;用你的实际代码我最终得到了这个。

我使用全局范围的变量currElem来处理最后使用过的acordion元素;与单击accordion元素时相比，我使用jQuery is方法检查是否是相同的元素。

  

描述：根据a检查当前匹配的元素集   选择器，元素或jQuery对象，如果至少有一个，则返回true   这些元素与给定的参数匹配。

最终代码如下：

var currElem;

$(function () {
    $('#philosophyOpen').click(function () {

        if (currElem && !currElem.is('#philosophyPopup #philosophyDashboard')) $(currElem).hide();

        $('#philosophyPopup #philosophyDashboard').slideToggle({
            direction: "up"
        }, 300);
        $(this).toggleClass('philosophyClose');

        currElem = $('#philosophyPopup #philosophyDashboard');
    });

    $('#aboutusOpen').click(function () {

        if (currElem && !currElem.is('#aboutusPopup #aboutusDashboard')) $(currElem).hide();
        $(this).toggleClass('aboutusClose');

        $('#aboutusPopup #aboutusDashboard').slideToggle({
            direction: "up"
        }, 300);

        currElem = $('#aboutusPopup #aboutusDashboard');
    });

    $('#tourOpen').click(function () {

        if (currElem && !currElem.is('#tourPopup #tourDashboard')) $(currElem).hide();

        $('#tourPopup #tourDashboard').slideToggle({
            direction: "up"
        }, 300);
        $(this).toggleClass('tourClose');

        currElem = $('#aboutusPopup #aboutusDashboard');
    });

    $('#joinusOpen').click(function () {

        if (currElem && !currElem.is('#joinusPopup #joinusDashboard')) $(currElem).hide();

        $('#joinusPopup #joinusDashboard').slideToggle({
            direction: "up"
        }, 300).addClass('accordClose');
        $(this).toggleClass('joinusClose');

        currElem = $('#joinusPopup #joinusDashboard');
    });
});

这是一个工作小提琴：http://jsfiddle.net/IrvinDominin/Ypr7F/