Question

在我的演示中，我添加并删除了类Selected。如果我点击链接然后再次点击
OPEN FORM toggleClass在首次点击时不起作用。为什么？我错过了什么？

基本上点击OPEN FORM我应该addClass('selected')和toggleClass('open')。

请参阅我的演示，然后点击链接。

我的js：

$('.cta a').on('click', function (e) {
    e.preventDefault();

    $('.cta a').removeClass('selected');
    $(this).addClass('selected');

    if ($('.Contact-form.selected').is(':visible')) {

        $('.cloned-contactform').addClass('open');
    } else {
        $('.cloned-contactform').removeClass('open');
    }

    $('.Contact-form.selected').bind('click', function () {
        $('.cloned-contactform').toggleClass('open');

    });


});

HTML：

<ul class="cta">
    <li><a href="#" class="Contact-form">OPEN FORM</a></li>
    <li><a href="#" class="Globe">LINK</a></li>
    <li><a href="#" class="Search">LINK</a></li>
</ul>
<div class="cloned-contactform">
    <div class="contactform"></div>
</div>

Answer 1

你正在寻找像这样的东西吗？：http://jsfiddle.net/y8oL13Ld/1/

$('.Contact-form').on('click', function() {
    $('.cta a').removeClass('selected');
    $(this).addClass('selected');

    if ($('.cloned-contactform').is(':visible')) {
        $('.cloned-contactform').removeClass('open');
        $('.cloned-contactform').hide();
    }
    else {
        $('.cloned-contactform').addClass('open');
        $('.cloned-contactform').show(); 
    }
});

解释：OP js在逻辑上有点复杂。虽然我并不完全确定OP想要的功能，但是我撕掉了所有不必要的j并满足了以下要求：

单击OPEN FORUM会将所选的类添加到锚点（如果已选择类，则从其他链接中删除）
div cloned-contactform的类打开了
div cloned-contactform的可见性切换

编辑：由于要求的精确定义，我更新了jsfiddle：http://jsfiddle.net/y8oL13Ld/2/

以下jquery处理这样一个事实：如果单击其他链接，它将关闭div cloned-contactform并被选中。

$('.Globe, .Search').on('click', function() {
    $('.cta a').removeClass('selected');
    $(this).addClass('selected');
    $('.cloned-contactform').removeClass('open');
    $('.cloned-contactform').hide();        
});

最终编辑：由于范围变化，希望大声笑。 http://jsfiddle.net/y8oL13Ld/4/

$('.cta a').on('click', function(){
    // if clicked contact link
    if ($(this).hasClass('contact')) {
        // if already selected
        if ($(this).hasClass('selected')) {
            // toggle
            $('.contact-div').removeClass('open');
            $(this).removeClass('selected');
        }
        // if not already selected
        else {
            // remove selected and open classes from all others
            $('.cta a').removeClass('selected');
            $('.section').removeClass('open');
            // apply selected and open classes to this
            $('.contact-div').addClass('open');
            $(this).addClass('selected');
        }
    }
 });

我改变了html结构：

<div class="contact-div section">contact div</div>
<div class="global-div section" style="background:gray;">global div</div>
<div class="search-div section" style="background:lightgray;"> search div</div>

Answer 2

有点猜测，但看起来你正在制作导航并点击其中的链接显示某个div。如果这就是你想要实现的目标，那么可能会有一些重构建议：

为每个部分设一个div

<div class="section contact-form">Form Stuff</div>
<div class="section globe">Globe Stuff</div>
<div class="section search">Search Stuff</div>

然后你的链接就像：

<li><a href="#" data-section="contact-form">OPEN FORM</a></li>
<li><a href="#" data-section="globe">LINK</a></li>
<li><a href="#" data-section="search">LINK</a></li>

然后您的javascript代码与您点击的链接不明确：

$('a').click(function(){
  // Grab the value of data-section
  var selected = $(this).data('section')
  $('.section').hide()
  // Show the corresponding div
  $("'."+ selected + "'").show()
});

http://jsfiddle.net/4brfejw5/

jquery toggleClass菜单在第一次单击时不起作用

2 个答案: