Jquery Cross does not appear from the beginning

时间：2017-04-09 23:13:59

标签： jquery

I have coded this accordion and it is working but it has a bug, when you open the page the + does not show from the beginning.

I used data content attribute to get the + because the css has a before pseudoclass and the functionality is working.

But the x does not appear from the beginning just the square when you click the second time it works.

I assume there is something missed in the code but I can figure out what

javascriptexerciselink

// Add your custom js here

$(document).ready(function () {
    //toggle the component with class RevealCard-list
    $(".RevealCard-header").click(function () {
        if ($(this.id + ' .RevealCard-list').is(':visible')) {
            $(this.id + ".RevealCard-list").slideUp(300);
            $(this).attr('data-content', '+');
        } else {
            $(this.id + " .RevealCard-list").slideDown(300);
            $(this).attr('data-content', '-');          
        }
    });
});
/* Modify this file as required */

.RevealCard {
  font-family: sans-serif;
}

.RevealCard-header {
  background: #000;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: normal;
  margin: 0;
  padding: 0.5em;
  position: relative;
}

.RevealCard-header::after {
  border: 1px solid #fff;
  content: attr(data-content);
  height: 1.15em;
  line-height: 1em;the 
  position: absolute;
  right: 0.5em;
  text-align: center;
  width: 1.15em;
}

.RevealCard-list {
  border: 1px solid #000;
  border-top: none;
  margin: 0 0 2em 0;
  padding-bottom: 1em;
  padding-top: 1em;
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <title>Exercise 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/main.css">
  <link rel="stylesheet" href="exercise03.css">
</head>
<body>

  <div class="RevealCard">
    <h3 class="RevealCard-header">
      Top five loves
    </h3>
    <ol class="RevealCard-list">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
      <li>Fourth item</li>
      <li>Fifth item</li>
    </ol>
  </div>

  <div class="RevealCard">
    <h3 class="RevealCard-header">
      Top five hates
    </h3>
    <ol class="RevealCard-list">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
      <li>Fourth item</li>
      <li>Fifth item</li>
    </ol>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="../js/vendor/jquery-3.2.0.min.js"><\/script>')</script>
  <script src="../js/plugins.js"></script>
  <script src="../js/main.js"></script>
  <script src="exercise03.js"></script>

</body>
</html>

2 个答案:

答案 0 :(得分：0)

You need to add the data-content-attribute to the HTML code - currently, your code only applies the data-content after it's been clicked.

Here's a fixed version of the code.

// Add your custom js here

$(document).ready(function () {
    //toggle the component with class RevealCard-list
    $(".RevealCard-header").click(function () {
        if ($(this.id + ' .RevealCard-list').is(':visible')) {
            $(this.id + ".RevealCard-list").slideUp(300);
            $(this).attr('data-content', '+');
        } else {
            $(this.id + " .RevealCard-list").slideDown(300);
            $(this).attr('data-content', '-');          
        }
    });
});
/* Modify this file as required */

.RevealCard {
  font-family: sans-serif;
}

.RevealCard-header {
  background: #000;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: normal;
  margin: 0;
  padding: 0.5em;
  position: relative;
}

.RevealCard-header::after {
  border: 1px solid #fff;
  content: attr(data-content);
  height: 1.15em;
  line-height: 1em;the 
  position: absolute;
  right: 0.5em;
  text-align: center;
  width: 1.15em;
}

.RevealCard-list {
  border: 1px solid #000;
  border-top: none;
  margin: 0 0 2em 0;
  padding-bottom: 1em;
  padding-top: 1em;
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <title>Exercise 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/main.css">
  <link rel="stylesheet" href="exercise03.css">
</head>
<body>

  <div class="RevealCard">
    <h3 class="RevealCard-header" data-content="+">
      Top five loves
    </h3>
    <ol class="RevealCard-list">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
      <li>Fourth item</li>
      <li>Fifth item</li>
    </ol>
  </div>

  <div class="RevealCard">
    <h3 class="RevealCard-header" data-content="+">
      Top five hates
    </h3>
    <ol class="RevealCard-list">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
      <li>Fourth item</li>
      <li>Fifth item</li>
    </ol>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="../js/vendor/jquery-3.2.0.min.js"><\/script>')</script>
  <script src="../js/plugins.js"></script>
  <script src="../js/main.js"></script>
  <script src="exercise03.js"></script>

</body>
</html>

答案 1 :(得分：0)

This is simple to add the + sign on load (see below).

I also fixed the issue where all lists were opening.
I'm sure this is not the desired behavior.
You got yourself a lot of trouble because you didn't know the .siblings() method.

// Add your custom js here

$(document).ready(function () {
    //toggle the component with class RevealCard-list
    $(".RevealCard-header").click(function () {

        if ( $(this).siblings('.RevealCard-list').is(':visible') ) {
            $(this).siblings(".RevealCard-list").slideUp(300);
            $(this).attr('data-content', '+');
        } else {
            $(this).siblings(".RevealCard-list").slideDown(300);
            $(this).attr('data-content', '-');          
        }
    });
  
  // Onload add + signs
  $(".RevealCard-header").attr('data-content', '+');
});
/* Modify this file as required */

.RevealCard {
  font-family: sans-serif;
}

.RevealCard-header {
  background: #000;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: normal;
  margin: 0;
  padding: 0.5em;
  position: relative;
}

.RevealCard-header::after {
  border: 1px solid #fff;
  content: attr(data-content);
  height: 1.15em;
  line-height: 1em;the 
  position: absolute;
  right: 0.5em;
  text-align: center;
  width: 1.15em;
}

.RevealCard-list {
  border: 1px solid #000;
  border-top: none;
  margin: 0 0 2em 0;
  padding-bottom: 1em;
  padding-top: 1em;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="RevealCard">
  <h3 class="RevealCard-header">
    Top five loves
  </h3>
  <ol class="RevealCard-list">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
    <li>Fifth item</li>
  </ol>
</div>

<div class="RevealCard">
  <h3 class="RevealCard-header">
    Top five hates
  </h3>
  <ol class="RevealCard-list">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
    <li>Fifth item</li>
  </ol>
</div>

相关问题
最新问题