1

会社の FAQ セクションに HTML5 タグの詳細を使用しています。問題は、ユーザーが別の質問を開いた場合、他の質問が自動的に閉じないことでした。したがって、Webで検索したところ、次の解決策が見つかりました。

function thisindex(elm){
      var nodes = elm.parentNode.childNodes, node;
      var i = 0, count = i;
      while( (node=nodes.item(i++)) && node!=elm )
        if( node.nodeType==1 ) count++;
      return count;
    }

    function closeAll(index){
      var len = document.getElementsByTagName("details").length;

      for(var i=0; i<len; i++){
        if(i != index){
          document.getElementsByTagName("details")[i].removeAttribute("open");
        }
      }
    }

このコードはある意味で正しく機能しますが、いくつかの小さな問題があります。2 つの質問を同時に開き、おかしな動作をすることがあります。これが適切に機能する方法はありますか？これは、デスクトップ、タブレット、モバイルで動作するはずです。

望ましくない影響: ここに画像の説明を入力

すべてのコードでフィドルhttp://jsfiddle.net/877tm/を作成しました。JavaScript はそこで動作しています。ライブで見たい場合は、ここをクリックしてください。

4

4 に答える 4

5

jQueryにタグを付けたので、これを行うことができます：

$('.info').on('click', 'details', function () {
    $('details').removeAttr('open');
    $(this).attr('open', '');
});

これは、任意の をクリックしたときopenにすべてのタグの属性を削除し、クリックしたばかりのタグを再度開くことだけです。detaildetail

http://jsfiddle.net/877tm/3/

于 2013-11-16T21:06:21.270 に答える
0

詳細をアコーディオンタグとして作成するには、以下の jquery を使用できます。

$("#edit-container details summary").click(function(e) {
    var clicked = $(this).attr('aria-controls');
    closeAll(clicked);
});
function closeAll (openDetailid){
      $("#edit-container details" ).each(function( index ) {
        var detailid = $(this).attr('id');
        var detailobj = document.getElementById(detailid);
          if (openDetailid != detailid ) {
           detailobj.open = false;
          }
       });
      $('html, body').stop().animate({ scrollTop: $('#'+openDetailid).offset().top -100 }, 1000);
  }
于 2019-05-07T10:00:52.023 に答える
-1

私はjQueryで解決策を持っています

$('details').on('click', function(ev){ //on a '<details>' block click
        ev.preventDefault(); //prevent the default behavior
        var attr = $(this).attr('open');
        if (typeof attr !== typeof undefined && attr !== false){ //if '<details>' block is open then close it
            $(this).removeAttr('open');
        }else{ // if '<details>' block is closed then open the one that you clicked and close all others
            var $that = $(this); //save the clicked '<details>' block
            $(this).attr('open','open'); //open the '<details>' block
            $('details').each(function(){ //loop through all '<details>' blocks
                if ($that.is($(this))){ //check if this is the one that you clicked on, if it is than open it or else close it
                    $(this).attr('open','open');
                }else{
                    $(this).removeAttr("open");
                }
            });
        }
    });
于 2015-01-16T08:51:50.450 に答える