Question

这是我的html-

<div id="5bdf3284466d57.18631639">
    <div class="tm-collapse tmaccordion">
        <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
            <span class="tcfa tm-arrow tcfa-angle-down"></span>
        </h3>
        <div class="tm-collapse-wrap closed" style="display: none;">      
            <p>The display / glass of your device is broken, cracked 
                or damaged or your touch screen no longer responds.</p>         
        </div>
    </div>
</div>

我在页面的某处还有另一个div标签

<div id="displayandglass">Display and glass</div>

我正在尝试使用jquery click事件，以便在

<div id="displayandglass">Display and glass</div>

点击

，则上述新闻div之一的类和样式将从-更改为

<div class="tm-collapse-wrap closed" style="display: none;">

到

<div class="tm-collapse-wrap" style="display: block;">

由于嵌套级别，我无法这样做。有人可以帮忙吗？

Answer 1

将一个类添加到您的 div 并将其用作选择器。

function showData() {
  $(".description").css('display', 'block');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="5bdf3284466d57.18631639">
  <div class="tm-collapse tmaccordion">
    <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
      <span class="tcfa tm-arrow tcfa-angle-down"></span>
    </h3>
    <!-- 
         Using "description" class, you can use whatever you like, 
         or even use an ID. Use "." for classes and "#" for id attribute.
     -->
    <div class="tm-collapse-wrap closed description" style="display: none;">
      <p>The display / glass of your device is broken, cracked or damaged 
         or your touch screen no longer responds.</p>
    </div>
  </div>
</div>


<div id="displayandglass" onclick="showData()">Display and glass</div>

有关所有可能的jQuery选择器的列表，请查看here

Answer 2

您可以在您的#displayandglass div上添加一个单击事件，以删除close类和style属性（display:block;是<div>的默认事件因此不必内联添加该规则。

$("#displayandglass").on("click", function(event){
    $(".tm-collapse-wrap").removeAttr("style").removeClass("closed");
    /* --> $(".tm-collapse-wrap").removeClass("closed").css("display", "block"); */
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div id="5bdf3284466d57.18631639">
    <div class="tm-collapse tmaccordion">
      <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
        <span class="tcfa tm-arrow tcfa-angle-down"></span>
      </h3>
      <div class="tm-collapse-wrap closed" style="display: none;">      
        <p>The display / glass of your device is broken, cracked or damaged or your touch screen no longer responds.</p>         
      </div>
    </div>
  </div>
</div>
<div id="displayandglass">Display and glass</div>

编辑1

因为您的ID有一个句点（。），所以您必须使用以下正弦值：#5bdf3284466d57\\.18631639进行选择（例如，最好使用连字符而不是句点）

$("#displayandglass").on("click", function(event){
    $("#5bdf3284466d57\\.18631639 .tm-collapse-wrap").removeAttr("style").removeClass("closed");
    /* --> $(".tm-collapse-wrap").removeClass("closed").css("display", "block"); */
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="5bdf3284466d57.18631639">
    <div class="tm-collapse tmaccordion">
      <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
        <span class="tcfa tm-arrow tcfa-angle-down"></span>
      </h3>
      <div class="tm-collapse-wrap closed" style="display: none;">      
        <p>The display / glass of your device is broken, cracked or damaged or your touch screen no longer responds.</p>         
      </div>
    </div>
  </div>
</div>
<div id="displayandglass">Display and glass</div>

单击另一个div时，jquery更改div的类和内联样式

2 个答案: