显示两个不同 div 的两个按钮答案

【问题标题】：Two buttons showing two different div显示两个不同 div 的两个按钮
【发布时间】：2014-12-30 15:27:54
【问题描述】：

我的 jQuery 代码有问题。我想单击属于该按钮的预览文本之一，而另一个最终被关闭。

文本应该使用slideDown() 消失并使用slideUp() 消失。怎么能适应才不会弄得一团糟？

HTML：

<div class="ata-pdf-wrapper ata-btn-video">
    <a title="Videos">
        <span>Videos</span>
        <span> </span>
    </a>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
    <a title="Download PDF">
        <span>Download</span>
        <span> </span>
    </a>
</div>
<br/>
<br/>
<div class="ata-media-wrapper">
    <div class="ata-downloads">
        <ul>
            <li>
                <a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
            </li>
            <li>
                <a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
            </li>
            <li>
                <a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
            </li>
            <li>
                <a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
            </li>
        </ul>
    </div>
    <div class="ata-videos">
        <ul>
            <li>
                <a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
            </li>
            <li>
                <a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
            </li>
            <li>
                <a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
            </li>
            <li>
                <a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
            </li>
        </ul>
    </div>
</div>

jQuery:

$(document).ready(function() {

    $(".ata-pdf-wrapper.ata-btn-video").click(function(){
        if ($(".ata-pdf-wrapper.ata-btn-video").hasClass("active")) {
            $(".ata-media-wrapper").hide();
            $(".ata-videos").fadeIn(500);
            $(".entry-content").removeClass("shadow");
            $(".ata-pdf-wrapper.ata-btn-video").removeClass("active");
        } else{
            $(".ata-pdf-wrapper.ata-btn-video").addClass("active");
            $(".ata-media-wrapper").show();
            $(".ata-videos").slideDown(500);
            $(".entry-content").addClass("shadow");
        };
    });

    $(".ata-pdf-wrapper.ata-btn-pdf").click(function(){
        if ($(".ata-pdf-wrapper.ata-btn-pdf").hasClass("active")) {
            $(".ata-media-wrapper").hide();
            $(".ata-downloads").fadeIn(500);
            $(".entry-content").removeClass("shadow");
            $(".ata-pdf-wrapper.ata-btn-pdf").removeClass("active");
        } else{
            $(".ata-pdf-wrapper.ata-btn-pdf").addClass("active");
            $(".ata-media-wrapper").show();
            $(".ata-downloads").slideDown(500);
            $(".entry-content").addClass("shadow");
        };
    });

});

代码在jsFiddle。

【问题讨论】：

在问题本身中发布您的代码，而不仅仅是在外部链接上。人们不必离开这个网站就能看到您的问题是什么

标签： javascript jquery html css show-hide

【解决方案1】：

如果你了解你想对这些列表做什么，那么下面的例子就不是乱七八糟的了。

$(document).ready(function() {

	$(".ata-pdf-wrapper.ata-btn-video").click(function(ev){
           var $currentTarget = $(ev.currentTarget);
		if ($currentTarget.hasClass("active")) {
            $(".ata-videos").slideUp(500);
			$(".entry-content").removeClass("shadow");
			$currentTarget.removeClass("active");
		} else{
			$currentTarget.addClass("active");
			$(".ata-videos").slideDown(500);
			$(".entry-content").addClass("shadow");
		};
	});

	$(".ata-pdf-wrapper.ata-btn-pdf").click(function(ev){
        var $currentTarget = $(ev.currentTarget);
		if ($currentTarget.hasClass("active")) {
			$(".ata-downloads").slideUp(500);
			$(".entry-content").removeClass("shadow");
			$currentTarget.removeClass("active");
		} else{
			$currentTarget.addClass("active");
			$(".ata-downloads").slideDown(500);
			$(".entry-content").addClass("shadow");
		};
	});

});

.ata-pdf-wrapper a {
	display: inline-block;
	background: #55d239;
	border-radius: 20px;
	text-align: center;
	border: 2px solid #fff;
	cursor: pointer;
}

.ata-pdf-wrapper a > span {
	float: left;
	padding: 6px 20px 5px 25px;
	color: #fff;
}

.ata-pdf-wrapper.ata-btn-video a > span + span,
.ata-pdf-wrapper.ata-btn-pdf a > span + span,
.ata-pdf-wrapper a > span + span {
	float: right;
	width: 11px;
	height: 18px;
	padding: 10px 10px 10px 18px;
	border-left: 1px solid #45bd2a;
}

.ata-pdf-wrapper a:hover,
.ata-pdf-wrapper.active a {
	border: 2px solid #309319;
}

.ata-pdf-wrapper.ata-btn-video {
	right: 200px;
}

.ata-downloads,
.ata-videos {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>

<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>

<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>

<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>    

<br/> <br/>

【讨论】：