Onclick一個元素，滑動切換的div

我想用jquery做一個手風琴開啓/關閉div的div。但由於某種原因，jquery中的next（）似乎不起作用。我希望當標題被點擊時，所有其他div應該被關閉，除了被點擊的那個。Onclick一個元素，滑動切換的div

HTML代碼 -

<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div> 
<div class="office">sadasd</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div> 
<div class="office">sadasd</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div>

演示 - https://jsfiddle.net/v3hc19np/1/

任何幫助，高度讚賞。

來源

2017-03-31 Prithviraj Mitra

在此處包含完整的代碼。見** [mcve] ** – Tushar

'h3'元素沒有兄弟，因此'next（）'什麼也沒有發現 –

我在下一個之前添加了parent（）。現在它滑落了，但又滑了下來，因爲我想要關閉所有其他div。我可能需要更改HTML？ –

和其他人一樣，標題旁邊沒有$.next('div')，所以我將.office移動到了，以便該元素現在與它相鄰。用您的原始HTML進行更新。

$(function() { 
 
    var $titles = $('.office-title'), 
 
     $offices = $('.office'); 
 
    $titles.on('click', function() { 
 
    var $target = $(this).parent('.office-row').next('.office'); 
 
    $target.slideToggle(); 
 
    $offices.not($target).slideUp(); 
 
    }); 
 
});

.office { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div>

來源

2017-03-31 16:12:44

非常感謝。是否有可能在不改變html結構的情況下實現這一點。我做了，但沒有完美運作。 –

@PrithvirajMitra肯定有可能，但你爲什麼想？它只會稍微改變JS，但沒什麼大不了的。如果您現在執行時遇到問題，我懷疑使用原始HTML會改變任何內容。 –

@PrithvirajMitra用您的原始HTML更新了代碼 –

解決方案：

你的div不正確的嵌套，從而在未來（ 'DIV'）找不到。下面是它應該是這樣：

<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div>

演示： https://jsfiddle.net/v3hc19np/5/

來源

2017-03-31 16:15:57

我們可以循環的元素，並使用無jquery的顯示出來，然後用撥動此功能的工作代碼爲你查詢

$('.office-title').click(function() { 
    $(".office").each(function(index,obj){ 
     $(obj).hide(); 
    }); 
    $(e.target).parent().next().slideToggle(); 
    return false; 
    });

來源

2017-03-31 16:20:41 saktivel

Onclick一個元素，滑動切換的div

回答

相關問題