Question

我要做的是，当点击六个div中的一个时，一个单独的div将会出现3个特定的div。原来的六个div中的每一个都有三个相似但不同的div。

http://jsfiddle.net/petiteco24601/hgo8eqdq/

$(document).ready(function () {
    $(".talkbubble").mouseout(function(){
        $(".sidebar").show();
});$
    $(".talkbubble").click(function(){
        $

如何制作它以便当您单击“talkbubble”div时，会出现一个不同的“侧边栏”div及其包含的所有元素，当您使用鼠标输出时，第一个talkbubble div会自动激活？

Answer 1

以下是如何执行此操作的演示：http://jsfiddle.net/n1xb48z8/2/

此示例的主要部分是一些看起来像这样的javascript：

$(document).ready(function(){
    showSideBar(1);
    $('.expander').click(function(){
        var sidebarIndex = $(this).data('sidebar-index');
        showSideBar(sidebarIndex);
    });
    $('#Container').mouseleave(function(){
        showSideBar(1);
    });

});

function showSideBar(index){
    $('.sidebarContent').hide();
    $('.sidebarContent[data-index="' + index + '"]').show();
}

.data（＆＃39; some-name＆＃39;）会为您提供属性data-some-name =＆＃34;＆＃34;在特定元素上，这是一个html 5属性，如果你不想使用它，你可以为每个元素赋予它们自己的类名，例如：

<div class="sidebarContent subBarContent_1">
    <!-- content -->
</div>

并使用＆＃39; .subBarContent_1＆＃39;作为你的jquery选择器而不是。然后，您还必须将某种数据附加到您的可点击div，以确定您想要显示哪一个，您可以使用隐藏字段来执行此操作：

<input type="hidden" class="subContentSelector" value="subBarContent_1" />

javascript就是这样：

$(document).ready(function(){
    showSideBar(1);
    $('.expander').click(function(){
        var sidebarSelector = $(this).find('.subContentSelector').val();
        showSideBar(sidebarSelector );
    });
    $('#Container').mouseleave(function(){
        showSideBar('subBarContent_1');
    });

});

function showSideBar(selector){
    $('.sidebarContent').hide();
    $('.sidebarContent.' + selector).show();
}

聚苯乙烯。溢出：隐藏的CSS是因为chrome搞砸了侧边栏内容的位置，否则......哦，铬，你傻鹅

javascript点击图片显示

1 个答案: