0

这对某人来说可能超级简单，但我使用“手风琴”jquery 来显示联系人列表。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(function() {
            $("#accordion").accordion();
        });
    </script>
</head>

<body>
    <div id="accordion">
         <h3>Section 1</h3> 
        <div>
            <p>test
                <br>Phone: xxxx
                <br>Email: blabla@aejx.com</p>
        </div>
         <h3>Section 2</h3> 
        <div>
            <p>test</p>
        </div>
         <h3>Section 3</h3> 
        <div>
            <p>test</p>
        </div>
         <h3>Section 4</h3> 
        <div>
            <p>test</p>
        </div>
    </div>
</body>

我想要做的是能够让联系人的图片出现在手风琴中每个扩展框的右侧（理想情况下在右上角，所以如果我最终添加生物或其他东西，图片会出现在顶部扩展框的右侧）。

我该怎么做？没有边框的表格？有人可以帮我写代码吗？谢谢 ：）

4

1 回答 1

1

您想要在扩展框中的任何内容都需要div进入#accordion. 从那里，只需将图像浮动到右侧。试一试：

<h3>Section 1</h3>

<div> <!-- content starts here -->
  <img src="contact-image.jpg">
  <p>test
    <br>Phone: xxxx
    <br>Email: blabla@aejx.com
  </p>
</div> <!-- end content -->

CSS：

#accordion div {
  overflow: hidden;
}

#accordion img {
  float: right;
}

这是准系统 CSS，因此您可能需要添加一些margin以添加适当的间距。

于 2013-09-10T20:42:49.513 回答