更改手风琴箭头位置

Change Accordion arrow position

本文关键字：位置 手风琴      更新时间：2023-09-26

我是jquery Mobile的新手。我创造了一个手风琴，但我希望上面的箭头出现在右边。有人能帮我吗？

下面是我的代码。

<div class="accordion" id = "accordion">
</div>

CSS

body {
    background-color: #333333;
    .accordion h3 a {
        width:50%
    }
    .accordion h3 a .ui-icon {
        float:right
    }
}

然后我用阵列加载了我的Accordion

for (i=0;i<names.length;i++)
  {               
      var newDiv = "<h3>"+names[i]+"</h3><p>"+subnames[i]+"</p>";
       $('.accordion').append(newDiv)
       $('.accordion').accordion("refresh");
}

在jQuery Mobile可折叠小部件中，您可以设置data-iconpos="right"将图标移动到右侧：

    <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 1</h3>
            <p>I'm the collapsible content for section 1</p>
        </div>
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 2</h3>
            <p>I'm the collapsible content for section 2</p>
        </div>
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 3</h3>
            <p>I'm the collapsible content for section 3</p>
        </div>
    </div>

这是演示

对于动态添加的内容：

   var thedynamiccontent = '<div data-role="collapsible" data-iconpos="right"><h3>Another Section</h3><p>Hello from dynamic added section</p></div><div data-role="collapsible" data-iconpos="right"><h3>Another Section 2</h3><p>Hello from dynamic added section 2</p></div>'; 
   $("#accordion").append(thedynamiccontent).collapsibleset("refresh").enhanceWithin();

动态演示

注意：您还可以更改使用的图标：data-collapsed-icon="arrow-r" data-expanded-icon="arrow-u"

我认为像你得到的东西应该有效：

.accordion h3 a .ui-icon {
    float:right
}

请确保在jQM CSS之后执行或加载自定义CSS。你也可以试试！重要声明：

.accordion h3 a .ui-icon {
    float:right !important;
}

这对我很有效。https://forum.jquery.com/topic/accordion-icons-alignment

.ui-accordion .ui-accordion-header .ui-icon { 
    position: absolute; 
    left: 100%; 
    margin-left: -30px; 
    top: 50%; 
    margin-top: -8px; 
}
.ui-accordion-icons .ui-accordion-header a { 
    padding-left: 1em; 
}
相关文章：