-1

タイトルとアンオーダーリストがあります

<h2> here is some interesting links </h2>
 <ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

私が好きなのは、タグの最後に[+]を追加し、以下を非表示にすることです

    次に、h2をクリックして、表示します。しかし、[+]を[-]にする必要があります。

    それを変える最良の方法は何ですか？

    次のようになります：

    クローズ：タイトル[+]

    開く：タイトル[-]

  • -link1
  • -link2
  • -link3
4

4 に答える 4

2

これが私の速い即興です。動作するはずです。

HTML：

<h2>
    here is some interesting links
    <span class="toggle" data-target="list1">-</span>
</h2>
<ul id="list1">
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
</ul>

jQuery：

$(".toggle").on("click", function() {
    var target = $(this).text(function(i, val) {
        return val == "+" ? "-" : "+";
    }).data("target");
    $("#" + target).toggle();
});

デモ：http： //jsfiddle.net/L3jep/

于 2012-08-20T18:49:22.260 に答える
2

現在のHTMLに変更がなく、jQueryによるすべての変更があると仮定します。

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(){
                return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });​

JSフィドルデモ。

上記のコードのこの部分を説明するために編集されました：

 return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';

これは三項演算子であり、条件（return that.text().indexOf('+') !== -1）がtrueまたはfalseであるかどうかを評価します。次?は「if-true」応答であり、次:は「if-false」応答です。

したがって、条件は、現在の要素の+から返された文字列内に文字が見つかったかどうかを評価します。見つかった部分文字列のインデックスを返すためtext()、結果をと比較しています。部分文字列は（文字列の先頭）にあるため、文字列が見つからない場合に戻ります。したがって、要素のテキスト内でが見つかった場合（したがって、返される結果はに等しくなりません）、テキストはに変更されますが、が見つかった場合、テキストはに変更されます。-1indexOf()0indexOf()-1+-1span[-]+ [-]

このreturnステートメントは、変更されたテキストをtext()メソッドに返すだけです。

メソッドの関数を修正しtext()、要素のテキストが関数の2番目のパラメーターとして使用できるという事実を利用するように更新されました。

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(i,t){
                return t.indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });​

JSフィドルデモ。

参照：

于 2012-08-20T18:52:24.887 に答える
1

このようなマークアップがあると仮定します

<h2> here is some interesting links </h2>
<a  class="aExpand" href="#">+</a>
 <ul class="sub" style="display:none;">
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

このスクリプトはそれを行います

$(function(){
     $(".aExpand").click(function(e){
       var item=$(this);  
        if(item.next("ul").is(":visible"))
        {         
          item.text("+").next("ul").hide();

        }
        else
        {           
            item.text("-").next("ul").show();
        }

    });    
});

作業サンプル： http： //jsfiddle.net/BqKn5/8/

于 2012-08-20T18:52:40.400 に答える
0

あなたの助けとここからの私の最終的なコードベース：JavaScriptで文字列を置き換えて「9.61」を「9:61」に変換するにはどうすればよいですか？

<script type="text/javascript">
$(function(){

    $('.bulletlisttohide').hide();

    $(".plus").click( function () {
        $(this).next('.bulletlisttohide').slideToggle(500, function (){
            if ($(this).is(":visible")) { $(this).prev('.plus').html(function(i, val) { return val.replace('[+]', '[-]'); }); }
            else { $(this).prev('.plus').html(function(i, val) { return val.replace('[-]', '[+]'); }); }
        });

        return false;
    });
})
</script>
于 2012-08-21T01:40:21.940 に答える