多个div打开和关闭的点击与div分为左和右 [英] Multiple div open and close on a click with div divided into left and right

问题描述

我有两个 div s（左和右）。如果在左侧的 div 中点击链接，它应该在存在多个问题的右侧 div 中打开数据。每个问题都是可点击的，并在点击时显示答案。

我已经执行了以下操作，但是当问题打开时，上一个问题保持打开状态并且不会关闭。我试着用 toggle 关闭同一个链接。

我的JavaScript：

  $（'。targetDiv'）。hide（）; 
 $（'。show'）。click（function（）{
 $（'＃div'+ $（this）.attr（'target'））。toggle（）; 
 }）; 
 $（'。innerdiv'）。hide（）; 
 $（'。answer'）。click（function（）{
 $（'＃innerdiv'+ $（this）.attr（'target'））。toggle（）; 
 }）; 
  

我的HTML：

 < div style =width：30％; float：left> 
< div class =buttons> 
< ul> 
< li>< a class =showtarget =1>下订单< / li>< / li> 
< li>< a class =showtarget =2> blah.com返回&取消常见问题解答< / a>< / li> 
< li>< a class =showtarget =3> Brands&股票及LT; / A>< /锂> 
< li>< a class =showtarget =4> Shipping&递送< / A>< /锂> 
< li>< a class =showtarget =5>付款< / a>< / li> 
< li>< a class =showtarget =6>定价< / a>< / li> 
< li>< a class =showtarget =7>增值税（VAT）< / a>< / li> 
< li>< a class =showtarget =8>隐私&安全和LT; / A>< /锂> 
< li>< a class =showtarget =9>关于公司< / a>< / li> 
< / ul> 
< / div> 
< / div> 
 
< div style =width：70％; float：right> 
< div id =div1class =targetDiv> 
< ul> 
< li>< a class =answertarget =1>我需要我的订单提供个人帮助。我可以联系谁？< / a>< div id =innerdiv1class =innerdiv>我们的客户服务中心乐意为您提供+91 124 6733300（上午10点至下午7点） ; / DIV>< /锂> 
< li>< a class =answertarget =2>如何开始新帐户？< / a>< div id =innerdiv2class =innerdiv> ;等等等等< / div>< / li> 
< li>< a class =answertarget =3>我在通过您的网站订购时遇到问题。我能做什么？< / a> < div id =innerdiv3class =innerdiv> hahahahah< / div>< / li> 
< li>< a class =answertarget =4>我的订单需要个人协助。我可以联系谁？< / a> < div id =innerdiv4class =innerdiv> b; la ablahhap< / div>< / li> 
< li>< a class =answertarget =5>如何开始新帐户？< / a>< div id =innerdiv5class =innerdiv> ;等等等等< / div>< / li> 
< / ul> 
< / div> 
< / div> 
  

请参阅JSFiddle： http://jsfiddle.net/C59bE/8/

解决方案

更新： 工作演示

也许这就是你要找的东西：

  $（this）.parent （）.siblings（）找到（ 'DIV [ID * = innerdiv]'）隐藏（）; 
  

这会选择所有其他＃innerdivs *并隐藏它。

Like：

  $（'。targetDiv'）。hide（）; 
 $（'。show'）。click（function（）{
 $（'＃div'+ $（this）.attr（'target'））。toggle（）; 
 }）; 
 $（'。innerdiv'）。hide（）; 
 $（'。answer'）。click（function（）{
 $（this）.parent（）。siblings（）。find（'div'）。hide（）; 
 $（'＃innerdiv'+ $（this）.attr（'target'））。toggle（）; 
}）; 
  

工作演示

I have two divs (left and right). If a link is clicked in the left div, it should open data in the right div where there are multiple questions. Each question is clickable and displays answers on click.

I have implemented the following, but when a question opens the previous question stays open and doesn't close. I tried using toggle which closes the same link.

My JavaScript:

$('.targetDiv').hide();
$('.show').click(function () {
    $('#div' + $(this).attr('target')).toggle();
});
$('.innerdiv').hide();
$('.answer').click(function() {
    $('#innerdiv' + $(this).attr('target')).toggle();   
});

My HTML:

<div style="width: 30%; float:left">
    <div class="buttons">
        <ul>
            <li><a  class="show" target="1">Placing an Order</a></li>
            <li><a  class="show" target="2">blah.com Returns & Cancellations FAQs</a></li>
            <li><a  class="show" target="3">Brands & Stock</a></li>
            <li><a  class="show" target="4">Shipping & Delivery</a></li>
            <li><a  class="show" target="5">Payment</a></li>
            <li><a  class="show" target="6">Pricing</a></li>
            <li><a  class="show" target="7">Value Added Tax (VAT)</a></li>
            <li><a  class="show" target="8">Privacy & Security</a></li>
            <li><a  class="show" target="9">About the Company</a></li>
        </ul>
    </div>
</div>

<div style="width: 70%; float:right">
    <div id="div1" class="targetDiv">
        <ul>
            <li><a class="answer" target="1">I need personal assistance with my order. Who can I contact?</a><div id="innerdiv1" class="innerdiv" >Our customer service centre is happy to assist you with your order on [phone] (10 AM - 7 PM)</div></li>
            <li><a class="answer" target="2" >How do I start a new account?</a><div id="innerdiv2" class="innerdiv">blah blah </div></li>
            <li><a class="answer" target="3">I am having problems ordering through your website. What can I do?</a> <div id="innerdiv3" class="innerdiv"> hahahahah </div></li>
            <li><a class="answer" target="4" >I need personal assistance with my order. Who can I contact?</a> <div id="innerdiv4" class="innerdiv"> b;la ablahhap </div></li>
            <li><a class="answer" target="5" >How do I start a new account?</a><div id="innerdiv5" class="innerdiv">blah blah </div></li>
        </ul>
    </div>
</div>​

See JSFiddle: http://jsfiddle.net/C59bE/8/

解决方案

UPDATE: WORKING DEMO

Maybe this is what you are looking for:

$(this).parent().siblings().find('div[id*=innerdiv]').hide();

This selects all the other #innerdivs* and hide it.

Like:

  $('.targetDiv').hide();
  $('.show').click(function () {
        $('#div' + $(this).attr('target')).toggle();
    });
  $('.innerdiv').hide();
  $('.answer').click(function(){
  $(this).parent().siblings().find('div').hide();
  $('#innerdiv' + $(this).attr('target')).toggle();   
  });

WORKING DEMO

这篇关于多个div打开和关闭的点击与div分为左和右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！