2

CSSを使用してトグルに基づいてアイコンとテキストを交換する必要があります。最初はリボンが非表示になります。JavaScriptが割り当てているcssクラスに基づいてアイコンとテキストを交換するにはどうすればよいですか？引き戸のようなテクニックですか？

HTML：

     <div id="ribbonHide">
                <a class="toolTipHover" href="#">
                    <div class="downArrowSmall">
                        <span class="ribbonHideToolTipOpen">Display the Ribbon</span> 
                        <span class="ribbonHideToolTipClose">Hide the Ribbon</span>
                    </div>
                </a>
            </div>

JavaScript：

 $('.toolTipHover > div').on('click', function() {
     $('#s4-ribbonrow').toggle();
     $(this).toggleClass('downArrowSmall upArrowSmall');
     FixRibbonAndWorkspaceDimensions();
});
4

2 に答える 2

2

さらにコンテキストを追加すると便利な場合がありますが、これが必要なものに対する私の推測です。少なくとも、すべてを切り替える関数（編集：バインドを使用しているようです）を使用する必要があります。1つのスパンを使用するので、次のようになります。

<script type="text/javascript">
function ToggleArrow(arrow)
{
   $('#s4-ribbonrow').toggle();
   $(arrow).toggleClass('downArrowSmall upArrowSmall');
   if($('#s4-ribbonrow').is(":visible"))
   {
     $(arrow).children(".ToolTip").html("Hide the Ribbon");
   }
   else
   {
     $(arrow).children(".ToolTip").html("Display the Ribbon");
   }
 FixRibbonAndWorkspaceDimensions(); 
}
</script>
        <div id="ribbonHide">
                <div class="downArrowSmall" onclick="ToggleArrow(this)">
                    <span class="ToolTip">Display the Ribbon</span> 
                </div>
        </div>
于 2012-11-07T20:41:10.103 に答える
1

そもそもインラインスクリプトを削除してください...

また、ブロックレベルの要素はインライン要素内にネストしないでください..それは合法ではないことを意味しますが、後で問題が発生する可能性があります。

// Select the immediate Div's inside the anchors
    $('.toolTipHover > div').on('click', function() {
         $('#s4-ribbonrow').toggle();
         $(this).toggleClass('downArrowSmall upArrowSmall'); // Toggle class
         FixRibbonAndWorkspaceDimensions();
    });
于 2012-11-07T20:36:32.167 に答える