Question

我希望第2列显示第1列中每个按钮的描述。

用户将能够单击第1列中的任何按钮，而第2列将填充内容。

我花了很长时间处理iFrame和可折叠对象，但无法正常工作，而且我的知识非常有限。

您知道一种解决方法吗？

<style>
* {
box-sizing: border-box;
}

.column1 {
    float: left;
    width: 40%;
    padding: 10px;
    height: 300px; 
}

.column2 {
    float: left;
    width: 60%;
    padding: 10px;
    height: 300px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>

<body>
<div class="row">
        <div class="column1" style="background-color:#aaa;">
                                                <button class="collapsible" 
data-parent="#myGroup">################</button>
                                                <button class="collapsible" 
data-parent="#myGroup">################</button>
                                                <button class="collapsible" 
data-parent="#myGroup">################</button>
                                                <button class="collapsible" 
data-parent="#myGroup">################</button>
                                                <button class="collapsible" 
data-parent="#myGroup">################</button>
                                                <button class="collapsible" 
data-parent="#myGroup">################</button>
                                                <button class="collapsible" 
data-parent="#myGroup">################</button>
                                                <button class="collapsible" 
data-parent="#myGroup">################</button>
                                            </div>
                                        <div class="column2" style="background-color:#bbb;">
                                                <p>Some text..</p>
                                        </div>
                                        </div> 
</body>

Answer 1

这个问题还不清楚-但是我会根据我的要求尽我所能。

听起来您想.column2根据.column1中按下的按钮动态显示数据。我建议的第一件事是在每个按钮上都有一个唯一的标识符（例如，一个ID）。这将使您能够确定需要将哪些信息放入.column2中。否则，您可以匿名进行检查，但是稍后可能会引起一些混乱。

接下来，您需要编写一些jQuery / JavaScript来监听按钮单击，然后执行一些操作。例如（匿名执行）：

$('.collapsible').click(function(){
   //do something, and eventually...
   $('.column2').html(/*the data*/);
});

现在，下一部分实际上取决于您从中获取数据的。一种实现方法是通过jQuery (Link to Documentation on $.post())通过$.post()请求到外部源，该源向您提供信息（例如PHP文件）。否则，您总是可以将数据直接添加到DOM中（尽管这可能会造成混乱，并且还可能带来其他一些问题，例如格式，页面速度等）。

如果 did 选择将其放入DOM，则其外观可能类似于：

<button class="collapsible" data-parent="#myGroup" data-description="Some text pertaining to the button that the user clicked">#########</button>

在这种情况下，您可以通过以下方式访问它：

$('.collapsible').click(function(){
    var description = $(this).attr('data-description');
    $('.column2').html(description);
});

很显然，您可能希望格式化数据，而不仅仅是将文本分割成div，因此您可以基于div设置样式或添加段落/跨度/另一个DOM周围的元素，例如：

 $('.collapsible').click(function(){
    var description = '<p class="description-class">' + $(this).attr('data-description') + '</p>';
    $('.column2').html(description);
});

如何使第二内容区域根据第一列中的链接显示不同的信息？

1 个答案: