使用 Javascript/CSS 展开/折叠 div 时交换三角形图标答案

【问题标题】：swap triangle icons when doing expanding/collapsing divs with Javascript/CSS使用 Javascript/CSS 展开/折叠 div 时交换三角形图标
【发布时间】：2012-11-07 20:30:09
【问题描述】：

我需要使用 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();
});

【问题讨论】：

标签： javascript jquery css sharepoint icons

【解决方案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>

【讨论】：

【解决方案2】：

首先删除内联脚本...

另外块级元素不应该嵌套在内联元素中......意味着它是不合法的，但它可能会在以后出现问题...... p>

// Select the immediate Div's inside the anchors
    $('.toolTipHover > div').on('click', function() {
         $('#s4-ribbonrow').toggle();
         $(this).toggleClass('downArrowSmall upArrowSmall'); // Toggle class
         FixRibbonAndWorkspaceDimensions();
    });

【讨论】：