Question

我的Jquery点击功能定位所有具有相同类名的元素，是否只有一种方法可以定位到点击的元素而不更改类名？

它基本上是一种手风琴，我希望描述文本在单击该部分并且出现PDF时消失。但是，当我单击一个部分时，所有描述文本都会消失。

＆＃13;

  if( $(".toggle .toggle-title").hasClass('active') ){
    		$(".toggle .toggle-title.active").closest('.toggle').find('.toggle-inner').show();
    	}


    	$(".toggle .toggle-title").click(function(){


          $('.text-content').toggle(function () {
          $(".text-content").css({display: "none"});
          }, function () {
          $(".text-function").css({display: "inline-block"});
          });



    		if( $(this).hasClass('active') ){
    			$(this).removeClass("active").closest('.toggle').find('.toggle-inner').slideUp(500);

    		}
    		else{
          $(this).addClass("active").closest('.toggle').find('.toggle-inner').slideDown(500);
    		}

    	});

＆＃13;

body {
  color: #4B4B4B;
  font-family: sans-serif;
  margin: 0;
}
body a {
  cursor: pointer;
  color: #4B4B4B;
  text-decoration: none;
}
body section {
  margin-bottom: 90px;
}
body section h1 {
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 10px;
  font-size: 25px;
  line-height: 1.5;
}

object{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  padding-bottom: 30px;
  padding-top: 30px;
}

img{
height: 100px;
width: auto;
display: block;
}






/* Styles for Accordion */
#accordion-section{
  position: relative;
  width: 80%;
  margin: 0 auto;
}


.image-holder{
  height: 100px;
  width: 100px;
  display: block;
  float: left;
  top: -5px;
  position: relative;
  clear: both;
  padding-right: 30px;
}

.toggle{
  background: #eee;
  margin-bottom: 50px;
  width: 100%;
  height: 100%;
}

.toggle .toggle-title {
  position: relative;
  height: auto;
  display: block;
  margin-bottom: 6px;
  cursor: pointer;
}
.toggle .toggle-title h3 {
  font-size: 20px;
  margin: 0px;
  line-height: 1;
  font-weight: 100;
}

.title{
  text-align: left;
  display: inline-block;
}



.toggle .toggle-inner {
  padding: 7px 25px 10px 25px;
  display: none;
  margin: -7px 0 6px;
  max-width: 100%;
  max-height: 100%;
  min-height: 100%;
}
.toggle .toggle-inner div {
  max-width: 100%;
  max-height: 100%;
  min-height: 100%;
}
.toggle .toggle-title{
  display: block;
  padding: 25px 25px 25px;
  background: #252525;
  color: white;
}

.title-desc{
  display: block;
  padding: 10px 25px 10px;
}

.text-content{
  display: inline-block;
}

.read-more{
  padding: 0px 25px 20px;
  cursor: pointer;
  font-size: 18px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion-section">
          <div class="toggle">
             <div class="toggle-title">
                <div class="image-holder">
                   <img src="http://prototypes.infopro-insight.com/internal-dev/bb8-repo/risk/images/journal/JONTF_pattern.svgz">
                </div>
                <h3>
                   <div class="title">
                      <p>JOURNAL OF NETWORK FINANCE THEORY</p>
                      <p style="font-size:16px;">Call for papers</p>
                   </div>
                </h3>
             </div>
             <div class="text-content">
                <div class="title-desc">
                   <h3>Title: Example call for paper</h3>
                   <p>
                     Example Lorem Ipsum
                   </p>
                </div>
             </div>
             <div class="toggle-inner">
                <object style="height:calc(100vh - 70px)" data="http://prototypes.infopro-insight.com/test/MW/call_for_papers.pdf"></object>
             </div>
          </div>
       </div>


       <div id="accordion-section">
          <div class="toggle">
             <div class="toggle-title">
                <div class="image-holder">
                   <img src="http://prototypes.infopro-insight.com/internal-dev/bb8-repo/risk/images/journal/JONTF_pattern.svgz">
                </div>
                <h3>
                   <div class="title">
                      <p>JOURNAL OF NETWORK FINANCE THEORY</p>
                      <p style="font-size:16px;">Call for papers</p>
                   </div>
                </h3>
             </div>
             <div class="text-content">
                <div class="title-desc">
                   <h3>Title: Example call for paper</h3>
                   <p>
                     Example Lorem Ipsum
                   </p>
                </div>
             </div>
             <div class="toggle-inner">
                <object style="height:calc(100vh - 70px)" data="http://prototypes.infopro-insight.com/test/MW/call_for_papers.pdf"></object>
             </div>
          </div>
       </div>

＆＃13;

Answer 1

如果你想保留你提供的当前html结构并且只希望你点击的标签消失，你可以更新.click（）函数来缓存你选择的$（this）元素并选择带有一类文本内容的兄弟元素，用于切换显示。

if ($(".toggle .toggle-title").hasClass('active')) {
    $(".toggle .toggle-title.active").closest('.toggle').find('.toggle-inner').show();
}
$(".toggle .toggle-title").click(function() {
    var $this = $(this); //create a $this variable to cache the element you are selecting into a variable to use multiple times throughout your .click function
    $this.siblings('.text-content').toggle(function() { //the element with a class of text-content is a sibling of the element with the class toggle-title, so you use siblings to select the text-content element
        $(".text-content").css({ display: "none" });
    }, function() {
        $(".text-function").css({ display: "inline-block" });
    });

    if ($this.hasClass('active')) {
        $this.removeClass("active").closest('.toggle').find('.toggle-inner').slideUp(500);
    } else {
        $this.addClass("active").closest('.toggle').find('.toggle-inner').slideDown(500);
    }
});

我的Jquery点击功能针对具有相同类名的所有元素

1 个答案: