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

<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