jquery首次点击不起作用,进一步点击工作

Question

这是我的代码jquery代码...第一次点击不工作,进一步点击工作,也在iphone safari没有发生任何事情.我们是否需要添加特定于safari浏览器的任何内容.任何帮助将不胜感激.

CSS

p.expand-one {
            cursor: pointer;
        }

        p.content-one {
            display:none;
        }

        p.expand-2 {
            cursor: pointer;
        }

        p.content-2 {
            display:none;
        }

HTML

<div class="sitesection">
    <p class="expand-one" onclick="dostuff('.expand-one','.content-one');" > + Click Here To Display The Content </p>
    <p class="content-one">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content-one">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>

    <p class="expand-2" onclick="dostuff('.expand-2','.content-2');"> + Click Here To Display The Content </p>
    <p class="content-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>
</div>

脚本

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script>
  function dostuff(classname1, classname2) {

      $(classname1).unbind().click( function(){
        $(classname2).slideToggle('fast');
        $(classname1).text(($(classname1).text() == '- Click Here To Display The Content') ? '+ Click Here To Display The Content':'- Click Here To Display The Content')
       });

  }
</script>

谢谢..

Answer 1

这是因为您只在第一次调用click()函数后添加事件处理程序doStuff().删除click()电话.

function dostuff(classname1, classname2) {
    $(classname2).slideToggle('fast');
    $(classname1).text(($(classname1).text() == '- Click Here To Display The Content') ? '+ Click Here To Display The Content':'- Click Here To Display The Content')
}

或者更好的是,删除丑陋和过时的on*事件属性,并使用不显眼的Javascript附加您的事件.正如您已经在使用jQuery,这是您如何做到这一点:

<div class="sitesection">
    <p class="expand"> + Click Here To Display The Content </p>
    <p class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>

    <p class="expand"> + Click Here To Display The Content </p>
    <p class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>
</div>

$(function() {
    $('.expand').click(function() {
        $(this).nextUntil('.expand').slideToggle('fast');
            $(this).text(function(i, text) {
            return text.trim().charAt(0) == '-' ? '+ Click Here To Display The Content' : '- Click Here To Display The Content';
        });
    });
});

工作实例