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;
        }

<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';
        });
    });
});

Working example