如何讓div關閉並隱藏在div內點擊關閉？

基本上，我有代碼，用戶點擊一個鏈接，然後div出現。用戶比必須點擊相同的鏈接才能使該div消失。我有八個div。如何設置它，以便您可以單擊div內的另一個鏈接關閉它，而不是單擊您用來打開它的同一個鏈接？我的代碼如下。如何讓div關閉並隱藏在div內點擊關閉？

http://www.lovehatecreate.net/iqhomes/jquery-show-hide-plugin-2/index.php

請忽略說語法錯誤的行。該代碼仍然有效，我只是忘了上傳一個文件，與我的問題不相關的東西在頁面上。

謝謝！

來源

2012-09-11 Julie S

請在問題相關的代碼。你也可能想創建一個小提琴，因爲那些人更容易分析代碼。 –

請問this是否覆蓋您的用例？

摘錄：

$('.show').click(function() { 
    var divId = $(this).data('divId'); 
    $('#' + divId).toggle(); 
}); 

$('.hide').click(function() { 
    $(this).parent().hide(); 
});

來源

2012-09-11 01:49:28 pdoherty926

完美！謝謝！ –

給所有<div>以及指示他們組合在一起的一類（僅一次一個開放的），然後鏈接點擊，隱藏之前與該類每個元素表示一方爲你點擊的鏈接。
如果您想將其與切換組合在一起，請在將它們全部隱藏之前獲取切換狀態，以便在打開它時關閉它。

來源

2012-09-11 01:30:27

這裏我有codebins做了完整的垃圾桶，請檢查一次演示鏈接。

演示：http://codebins.com/bin/4ldqp7c

HTML

<div id="links"> 
    <a class="openlink" href="javascript:void(0);"> 
    Open 
    </a> 
    <a class="openlink" href="javascript:void(0);"> 
    Open 
    </a> 
    <a class="openlink" href="javascript:void(0);"> 
    Open 
    </a> 
    <a class="openlink" href="javascript:void(0);"> 
    Open 
    </a> 
    <a class="openlink" href="javascript:void(0);"> 
    Open 
    </a> 
    <a class="openlink" href="javascript:void(0);"> 
    Open 
    </a> 
    <a class="openlink" href="javascript:void(0);"> 
    Open 
    </a> 
    <a class="openlink" href="javascript:void(0);"> 
    Open 
    </a> 
</div> 
<div id="boxes"> 
    <div class="box"> 
    <p> 
     Here is Content..!! 
    </p> 
    <p> 
     <a class="closelink" href="javascript:void(0);"> 
     Close 
     </a> 
    </p> 
    </div> 
</div>

jQuery的

$(function() { 
    var boxClone; 

    $(".openlink").click(function() { 
     //Clone Dialogbox 
     boxClone = $("#boxes").find(".box:eq(0)").clone(true, true); 
     var boxOffset = $("#boxes").find(".box:last").position(); 
     //Set Dialog Position 
     if (boxOffset.top == 0) { 
      boxOffset.top = 5; 
     } 
     if (boxOffset.left == 0) { 
      boxOffset.left = 60; 
     } 
     $(boxClone).css('top', (boxOffset.top + 20)); 
     $(boxClone).css('left', (boxOffset.left + 20)); 
     $(boxClone).appendTo($("#boxes")); 
     $(boxClone).show(500); 
    }); 

    //Close Dialogbox 
    $(".closelink").click(function() { 
     $(this).closest(".box").remove(); 
    }); 

});

CSS

#links{ 
    float:left; 
    width:50px; 
    border:1px solid #92a3a7; 
    padding:1px; 
    background:#88ddfa; 
} 
#links a{ 
    dispslay:block; 
    text-decoration:none; 
    color:#3543ff; 
} 
#links a:hover{ 
    text-decoration:underline; 
    color:#fd2211; 
} 
#boxes{ 
    float:left; 
    margin-left:10px; 
} 
#boxes p{ 
    text-align:center; 
    display:block; 
    color:#ccc; 
} 
#boxes a.closelink{ 
    text-decoration:none; 
    color:#ff2211; 
    background:#99cd9a; 
    width:40px; 
    text-align:center; 
    padding:3px; 
    font-size:14px; 
} 
#boxes a.closelink:hover{ 
    text-decoration:underline; 
    background:#a5d9a3; 
    color:#2222ff; 
} 

.box{ 
    position:absolute; 
    width:200px; 
    height:200px; 
    vertical-align:top; 
    border:10px solid #888; 
    background:url('http://www.lovehatecreate.net/iqhomes/jquery-show-hide-plugin-2/popupbg.png') #333; 
    display:none; 

}

演示：http://codebins.com/bin/4ldqp7c

來源

2012-09-11 11:04:48 gaurang171

如何讓div關閉並隱藏在div內點擊關閉？

回答

相關問題