为什么最近的不工作？

时间：2017-06-13 16:08:10

标签： javascript jquery closest

我正在尝试在我的页面中开发FAQ面板，当我尝试使用closest()功能时，它无法正常工作，我有任何错误，任何人都可以帮助我。< / p>

继承了我写的代码

$('.faqQuestion').on('click', function(){
  $(this).parent('.faqData').find('.open').removeClass('open');
  $(this).closest('.faqQuestion').addClass("open");

})
.closed{
	height: 0;
	opacity: 0;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: absolute;
}
.open{
	height: auto;
	opacity: 1;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: relative;
}

.faqQuestion{
	display: inline-block;
    height: 40px;
    float: left;
    width: 100%;
    background: #f0f0f0;
    padding: 5px;
    margin: 2px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}
.faqContent.open{
	padding: 10px;
	border: 1px solid rgba(200, 200, 200, 0.5);
	display: inline-block;
	width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqData clearfix">
  <div class="faqQuestion">
    What is a Virtual Assistant (VA)?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    What is the COST OF OUR SERVICES?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    Why work with our VA?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
</div>

由于

zeasts

4 个答案:

答案 0 :(得分：2)

  

当我点击任何faqQuestion时，faqContent应该打开，如果打开了其他faqContent，那么应该关闭它。

保持简单：

$('.faqQuestion').on('click', function(){
  $('.faqContent').removeClass('open') // close all
  $(this).next('.faqContent').addClass('open') // open the one immediately following what was clicked
})

（我不清楚你是否还需要设置/删除你的css中显示的.closed类;如果是这样你会这样做：.addClass('open').removeClass('closed')反之亦然。

答案 1 :(得分：2)

使用$(this).next('.faqContent').addClass("open"); 

$('.faqQuestion').on('click', function(){

  $(this).parent('.faqData').find('.open').removeClass('open').addClass('open');
  $(this).next('.faqContent').addClass("open");
  

})
.closed{
	height: 0;
	opacity: 0;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: absolute;
}
.open{
	height: auto;
	opacity: 1;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: relative;
  display:inline-block;
}

.faqQuestion{
	  display: inline-block;
    height: 40px;
    float: left;
    width: 100%;
    background: #f0f0f0;
    padding: 5px;
    margin: 2px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}
.faqContent.open{
	padding: 10px;
	border: 1px solid rgba(200, 200, 200, 0.5);
	display: inline-block;
	width: 100%;
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqData clearfix">
  <div class="faqQuestion">
    What is a Virtual Assistant (VA)?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    What is the COST OF OUR SERVICES?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    Why work with our VA?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
</div>

答案 2 :(得分：1)

你想选择问题后面的div（faqContent），所以遍历DOM的.closest()并不是你想要的。而是使用.next() 

$(this).next().addClass("open");

＆＃13;
＆＃13; 
$('.faqQuestion').on('click', function(){
  $(this).parent('.faqData').find('.open').removeClass('open');
  $(this).next().addClass("open");
})
＆＃13; 
.closed{
	height: 0;
	opacity: 0;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: absolute;
}
.open{
	height: auto;
	opacity: 1;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: relative;
}

.faqQuestion{
	display: inline-block;
    height: 40px;
    float: left;
    width: 100%;
    background: #f0f0f0;
    padding: 5px;
    margin: 2px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}
.faqContent.open{
	padding: 10px;
	border: 1px solid rgba(200, 200, 200, 0.5);
	display: inline-block;
	width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqData clearfix">
  <div class="faqQuestion">
    What is a Virtual Assistant (VA)?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    What is the COST OF OUR SERVICES?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    Why work with our VA?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

closest()方法用于获取最接近的祖先元素。在您的情况下使用next()方法，因为您想要紧接在元素之后的兄弟。

＆＃13;
＆＃13; 
$('.faqQuestion').on('click', function(){
 // remove `open` class and add `closed` class from all elements
  $('.faqContent').removeClass('open').addClass('closed');
  // add `open` class and remove `closed` class from adjuscent sibling
  $(this).next().addClass("open").removeClass('closed');
})
＆＃13; 
.closed{
	height: 0;
	opacity: 0;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: absolute;
}
.open{
	height: auto;
	opacity: 1;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
	position: relative;
}

.faqQuestion{
	display: inline-block;
    height: 40px;
    float: left;
    width: 100%;
    background: #f0f0f0;
    padding: 5px;
    margin: 2px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
}
.faqContent.open{
	padding: 10px;
	border: 1px solid rgba(200, 200, 200, 0.5);
	display: inline-block;
	width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqData clearfix">
  <div class="faqQuestion">
    What is a Virtual Assistant (VA)?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    What is the COST OF OUR SERVICES?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
  <div class="faqQuestion">
    Why work with our VA?
  </div>
  <div class="faqContent closed">
      <p>
        Data
      </p>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题