Question

请有人告诉我如何压缩/缩短此代码？我猜我可以使用子规则或父规则，但我不知道从哪里开始 - 仍然在学习JQuery时的绳索！

JQUERY：

$("#index").click(function(){
$(".about, .portfolio, .services, .packages,    .contact").removeClass('top');
});

$("#about").click(function(){
$(".portfolio, .services, .packages, .contact").removeClass('top');
$(".about").delay(500).queue(function(next) {
   $(this).addClass('top');
next();
});
});

$("#portfolio").click(function(){
$(".about, .services, .packages, .contact").removeClass('top');
$(".portfolio").delay(500).queue(function(next) {
   $(this).addClass('top');
next();
});
});

$("#services").click(function(){
$(".about, .portfolio, .packages, .contact").removeClass('top');
$(".services").delay(500).queue(function(next) {
   $(this).addClass('top');
next();
});
});

$("#packages").click(function(){
$(".about, .portfolio, .services, .contact").removeClass('top');
$(".packages").delay(500).queue(function(next) {
   $(this).addClass('top');
next();
});
});

$("#contact").click(function(){
$(".about, .portfolio, .services, .packages").removeClass('top');
$(".contact").delay(500).queue(function(next) {
   $(this).addClass('top');
next();
});
});

HTML：

  <ul>
<li><a id="index">Home</a></li>
<li><a id="about">About</a></li>
<li><a id="portfolio">Portfolio</a></li>
<li><a id="services">Services</a></li>
<li><a id="packages">Packages</a></li>
  </ul>


<div class="content container">

<!-- About -->
<div class="about container"></div>

<!-- Portfolio -->
<div class="portfolio container"></div>

<!-- Services -->
<div class="services container"></div>

<!-- Packages -->
<div class="packages container"></div>

<!-- Contact -->
<div class="contact container"></div>

</div><!-- .content -->

非常感谢任何帮助。如果您需要更多信息，请告诉我。

Answer 1

您可以使用：

$('ul li a').click(function(e){
    e.preventDefault();
    var div = this.id;
    $('.'+div).siblings('div').removeClass('top');
    $("."+div).delay(500).queue(function(next) {
       $(this).addClass('top');
       if(div !== "index") next();
    });
});

Answer 2

你可以尝试

<ul>
    <li><a id="index">Home</a></li>
    <li><a id="about" class="menu">About</a></li>
    <li><a id="portfolio" class="menu">Portfolio</a></li>
    <li><a id="services" class="menu">Services</a></li>
    <li><a id="packages" class="menu">Packages</a></li>
</ul>

然后

var $cts = $('.content > .container');
$("#index").click(function () {
    $cts.removeClass('top');
});
$('.menu').click(function () {
    var $ct = $('.' + this.id);
    $cts.not($ct).removeClass('top');
    $ct.delay(500).queue(function (next) {
        $(this).addClass('top');
        next();
    });
})

压缩/缩短此JQuery代码

2 个答案: