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

时间：2014-11-03 21:13:44

标签： javascript jquery html css show-hide

我的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。

1 个答案:

答案 0 :(得分：0)

如果你明白你想对这些列表做什么，那么下面的例子就是一些非常麻烦的东西。

＆＃13;
＆＃13; 
$(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");
		};
	});

});
＆＃13; 
.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;
}
＆＃13; 
<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/>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题