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

Question

在我的演示中，我添加和删除了 class 选定项。如果我点击链接然后再次点击
打开表单 toggleClass 在第一次点击时不起作用。为什么？我错过了什么？

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

请看我的Demo，点击链接

我的 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 想要的功能，但我删除了所有不必要的 js 并满足了以下要求：

单击“打开论坛”会将选定的 class 添加到锚点（如果其他链接已选定 class，则会从其他链接中删除选定的）
div 克隆联系表的 class 打开被切换
div 克隆联系表的可见性切换

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

以下 jquery 处理以下事实：如果单击其他链接，它会关闭 div 克隆的联系表并被选中。

$('.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

有点猜测，但看起来您正在创建导航并单击其中的 link 显示某个 div。如果这就是您要实现的目标，也许一些重构建议可能是这样的：

每个部分都有一个 div

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

那么你的 link 可能是这样的：

<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 代码与您点击的 link 不明确：

$('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 菜单在第一次点击时不起作用

jquery toggleClass menu doesn't work on first click

javascript

jquery

toggleclass