JQuery將隱藏的內容顯示在特定的div上點擊li元素

我有一些關於在關於上下文的特定位置顯示隱藏內容的問題。JQuery將隱藏的內容顯示在特定的div上點擊li元素

所以我這裏有這個佈局：

<div class="col-md-12"> 
    <div style="display:table; margin:auto; width:470px; height:470px; border:1px dashed;"> 
     <br /> 
     <div id="ShowPhotoContext" style="margin:auto;"> 
     Here should come hidden content from li element 
     </div> 
    </div> 

    <br /> 

    <div id="slider1" style="margin:auto;"> 
     <div class="thumbelina-but horiz left">&#706;</div> 
      <ul class="menu"> 
       <li> Click me           
        <div class="caption" id="comment_id1" style="display:none;"> 
         <p>Some comments to display</p> 
         <div class="btn-group"> 
          <ul class="dropdown-menu" role="menu"> 
           <li> First menu </li> 
           <li> Second menu </li> 
          </ul> 
         </div> 
        </div> 
       </li> 
      </ul> 
     <div class="thumbelina-but horiz right">&#707;</div> 
    </div> 
</div>

所以我這裏有菜單的列表「中點擊我」當你點擊這個li元素，在李隱藏的內容上，標題應在可見上面的ShowPhotoContext div。

我該怎麼用JQuery做到這一點？

來源

2014-01-30 Alnedru

$("li").click(function(){ 
    $("#ShowPhotoContext").html($(this).find(".caption").show());   
});

你可以試試嗎？

要複製內容到新的div試試這個：

$("li").click(function(){ 
    $("#ShowPhotoContext").html($(this).find(".caption").show().clone()); 
    $(this).find(".caption").hide(); 
});

來源

2014-01-30 10:46:36 timo

以及我如何指定在哪裏顯示？ – Alnedru

，因爲我應該在另一個區域顯示它，而不是在同一個位置，但正如你所看到的，我必須在SHowPhotoContext div – Alnedru

中顯示它是什麼意思？它顯示你在HTML – timo

用途：

$(document).on('click','.menu>li',function(){ 
    $('#ShowPhotoContext').html($(this).find('div.caption').show()) 
});

Working Fiddle

來源

2014-01-30 10:48:19

是的，它的工作原理，但我如何清理之前，我追加，因爲如果我追加更多，它只是附加...是否有一個函數來清理div？ – Alnedru

使用.html（）代替.append（） – CeejeeB

進行清理。你可以使用'$（'＃ShowPhotoContext'）。html（''）' –

<menu> <!-- make your structure context-sensitive --> 
    <ul> 
     <li> Click me           
      <div class="caption" id="comment_id1" style="display:none;"> 
      <!-- ... -->

JS：

var element = $("menu > ul > li:nth-of-type(1)"); // getting the first li in ul in menu 
element.on("click", function() { // bind the click-event 
    $("#ShowPhotoContext").html($(this).find("#comment_id1")); // add hidden content to showPhotoContext 
    $("#ShowPhotoContext").show(); // and finally display 
});

來源

2014-01-30 10:55:35 LarsEngeln

JQuery將隱藏的內容顯示在特定的div上點擊li元素

回答

相關問題