1

だから、私が作業しているチームページがあり、テキストのパネルとテキストリンクを表示/非表示に切り替えます。リンクを順番に開いたり閉じたりするとすべて正常に機能しますが、最初に各リンクを閉じずにリンクをクリックすると、テキストリンクが同期しなくなります。

リンクテキストを変更するためのクリック数を登録しています。パネルが開いているか閉じているかに基づいて変更するにはどうすればよいですか。

アドバイスをありがとう。

HTML:

<div class="people-row">
    <dl>
      <dt>
        <img src="head.jpg"/>
      </dt>
      <dd>
        <div class="block">
          <p class="person">
            First
          </p>
        </div>
        <a href="#" id="1" class="toggler">
          <span class="see">
            View
          </span>
          First
        </a>
      </dd>
    </dl>
    <dl>
      <dt>
        <img src="head.jpg"/>
      </dt>
      <dd>
        <div class="block">
          <p class="person">
            Second Person
          </p>
          <p class="title">
            My Job Title
          </p>
        </div>
        <a href="#" id="2" class="toggler">
          <span class="see">
            View
          </span>
          Second
        </a>
      </dd>
    </dl>

    <div id="1-info" class="full-bio">
      <p>
        First profile content
      </p>
    </div>
    <div id="2-info" class="full-bio">
      <p>
        Second profile content
      </p>
</div>

JavaScript:

$(function() {
    $(".full-bio").hide();
    $(".toggler").click(function() {
        $("#" + $(this).attr("id") + "-info").slideToggle('normal').siblings('div').hide();
    });
});
$(function() {
    $(".toggler").toggle(function() {
        $(".see").html("View");
        $('.see', this).html("Hide");
    }, function() {
        $(".see").html("View");
        $('.see', this).html("View");
    });
});
4

1 に答える 1

0

おそらく最もエレガントな解決策ではありませんが、それは機能します。

$(function() {
    $(".full-bio").hide();
    $(".toggler").click(function() {
        $("#" + $(this).attr("id") + "-info")
            .slideToggle('normal')
            .siblings('div')
            .hide();

        $('.see').not($('.see', this)).html("View");

        if ($('.see', this).html() === "Hide")
            $('.see', this).html("View");
        else
            $('.see', this).html("Hide");
    })        
});

http://jsfiddle.net/7ZL5C/をチェックしてください

于 2012-10-02T15:15:14.013 に答える