1

好的，所以我确信显而易见的事情只是在逃避我，但我有一个正在开发的网站，我试图让“额外”菜单像 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>
4

1 回答 1

0

实现手风琴效果的方法有很多；使用您的实际代码，我最终得到了这个。

我使用全局范围的变量currElem来处理最后使用的手风琴元素；比单击手风琴元素时，我使用 jQueryis方法检查是否是相同的元素。

描述：根据选择器、元素或 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/

于 2013-05-27T10:31:16.147 回答