Question

我正在尝试使用具有分割标题的手风琴的标题。我的意思是我想在标题的左边有名字，在右边有电话号码。我整个上午一直在努力解决这个问题，而且我不知道为什么这样做不起作用。根据我在此主题上阅读的内容，我认为可以使用的变体显示在Fiddle中。任何举行将不胜感激。

<div class="accordion">   
    <h3 class="arrow-right">
        <span class="headerLeft">John Doe</span>
        <span class="headerRight">617-438-5000</span>
    </h3>
    <div class="accordion-body">Content 1</div>

    <h3 class="arrow-right">
        <span class="headerLeft">Jimmy James</span>
        <span class="headerRight">617-438-5001</span>
    </h3>
    <div class="accordion-body">Content 2</div>

    <h3 class="arrow-right">
        <span class="headerLeft">Johnny Johnson</span>
        <span class="headerRight">617-438-5002</span>
    </h3>
    <div class="accordion-body">Content 3</div>
</div>


jQuery(function ($) {

    $(".accordion").accordion({
        clearstyle: true,
        collapsible: true,
        active: 0
    }); 
    $(".accordion h3").click(function () {  
        //here want all non selected section to have a right arrow
        $(this).siblings("h3").removeClass("arrow-down");
        $(this).siblings("h3").addClass("arrow-right");   

        //here I want the selected section to have a down arrow
        $(this).toggleClass("arrow-right");
        $(this).toggleClass("arrow-down");   
    });
});

Answer 1

首先你的h3需要宽度。我把它设置为

.accordion h3 {
    width:400px;
}

作为一个例子。接下来是跨度对齐。 text-align仅更改元素内的文本。如果将其放在span中，则span中的文本将对齐。如果要对齐元素本身，则应考虑使用float

.headerRight{
   float:right;
}

.headerLeft{
  float:left;
}

将它们放在一起，你就会得到如下所示（我已删除了JS，因为这里没有必要）

＆＃13;

.accordion h3 {
  width: 400px;
}
.accordion {
  width: 100%;
}
.accordion .accordion-body {
  border-bottom: 1px solid #fff;
  padding: 20px;
  height: auto;
  display: none;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
}
.arrow-right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #f00;
}
.headerRight {
  float: right;
}
.headerLeft {
  float: left;
}

＆＃13;

<div class="accordion">
  <h3 class="arrow-right">
        <span class="headerLeft">John Doe</span>
        <span class="headerRight">617-438-5000</span>
    </h3>
  <div class="accordion-body">Content 1</div>

  <h3 class="arrow-right">
        <span class="headerLeft">Jimmy James</span>
        <span class="headerRight">617-438-5001</span>
    </h3>
  <div class="accordion-body">Content 2</div>

  <h3 class="arrow-right">
        <span class="headerLeft">Johnny Johnson</span>
        <span class="headerRight">617-438-5002</span>
    </h3>
  <div class="accordion-body">Content 3</div>
</div>

＆＃13;

Answer 2

将白色空间设置为现在的H3：

.accordion h3 {
    white-space: nowrap;
}

以下完整代码：

＆＃13;

jQuery(function ($) {
    
    $(".accordion").accordion({
        clearstyle: true,
        collapsible: true,
        active: 0
    }); 
    $(".accordion h3").click(function () {  
        //here want all non selected section to have a right arrow
        $(this).siblings("h3").removeClass("arrow-down");
        $(this).siblings("h3").addClass("arrow-right");   
        
        //here I want the selected section to have a down arrow
        $(this).toggleClass("arrow-right");
        $(this).toggleClass("arrow-down");   
    });
});

＆＃13;

.accordion h3 {
    white-space: nowrap;
}
.accordion {
    width: 100%;
}

.accordion .accordion-body {
    border-bottom: 1px solid #fff;
    padding: 20px;
    height: auto;
    display: none;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
}
.arrow-right {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #f00;
}

.headerRight{
   text-align: right !important;
}

.headerLeft{
   text-align: left !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
<div class="accordion">   
    <h3 class="arrow-right">
        <span class="headerLeft">John Doe</span>
        <span class="headerRight">617-438-5000</span>
    </h3>
    <div class="accordion-body">Content 1</div>
    
    <h3 class="arrow-right">
        <span class="headerLeft">Jimmy James</span>
        <span class="headerRight">617-438-5001</span>
    </h3>
    <div class="accordion-body">Content 2</div>
   
    <h3 class="arrow-right">
        <span class="headerLeft">Johnny Johnson</span>
        <span class="headerRight">617-438-5002</span>
    </h3>
    <div class="accordion-body">Content 3</div>
</div>

＆＃13;

Answer 3

它不能正常工作的原因是因为h3是向右箭头，它向下箭头向下切换，其宽度变为0.这就是为什么它会下降的原因。所以你必须将箭头右侧与h3标签分开。你可以试试这个

HTML

<div class="accordion">   
    <h3>
        <span class="arrow-right"></span>
        <span class="arrow-down"></span>
        <span class="headerLeft">John Doe</span>
        <span class="headerRight">617-438-5000</span>
    </h3>
    <div class="accordion-body">Content 1</div>

    <h3>
        <span class="arrow-right"></span>
        <span class="arrow-down"></span>
        <span class="headerLeft">Jimmy James</span>
        <span class="headerRight">617-438-5001</span>
    </h3>
    <div class="accordion-body">Content 2</div>

    <h3>
        <span class="arrow-right"></span>
        <span class="arrow-down"></span>
        <span class="headerLeft">Johnny Johnson</span>
        <span class="headerRight">617-438-5002</span>
    </h3>
    <div class="accordion-body">Content 3</div>
</div>

CSS

.accordion h3{
    background:#CCC;
}

.accordion {
    width: 100%;
    background:#f2f2f2;
}
.arrow-down {
    position:absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
}
.arrow-right {
    position:absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #f00;
}

.headerRight{

    position:absolute;
    right:20px;
    width:200px;
    text-align:right;

}

.headerLeft{

    width:200px;
    position:relative;
    left:40px;
}

JQuery的

jQuery(function ($) {

    $(".arrow-down").hide();

    $(".accordion").accordion({
        clearstyle: true,
        collapsible: true,
        active: 0
    }); 
    $(".accordion h3").click(function () {  

        $(this).children('.arrow-right,.arrow-down').toggle();
        $(this).siblings().children('.arrow-down').hide();
        $(this).siblings().children('.arrow-right').show();

    });
});

jQuery手风琴分割头

3 个答案: