Question

当我将鼠标悬停在列表项上时，我正在尝试显示div，并在鼠标离开时还原其显示。我试过了hover()但它不起作用。

我尝试添加css display中的类display: block !imporant，并尝试添加类，但它甚至没有添加以使其显示

任何人都可以检查代码有什么问题吗？

$(document).ready(function() {
  $(".category").hover(function() {
    var cat = $(this).attr('id');
    //alert(cat);
    $(".sub_cat_" + cat).addClass('display');
  });
});

.display {
  display: block !important;
}

.no_display {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="categories list-group">
  <a href="/product/Cameras">
    <li class="category list-group-item" id="Cameras">
      <span class="category_icon"><i class="fa fa-camera fa-fw"></i></span>
      <span class="category_content">Camera</span>
      <span><i class="fa fa-chevron-right pull-right"></i></span>
      <div class="sub_categories light-border no_display" id="sub_cat_Cameras">asdasdasasdas</div>
    </li>
  </a>
  <a href="/product/Clothes">
    <li class="category list-group-item" id="Clothes">
      <span class="category_icon"><i class="fa fa-info-circle fa-fw"></i></span>
      <span class="category_content">Clothes</span>
      <span><i class="fa fa-chevron-right pull-right"></i></span>
      <div class="sub_categories light-border no_display" id="sub_cat_Clothes">asdasdasasdas</div>
    </li>
  </a>
  <a href="/product/Handhelds">
    <li class="category list-group-item" id="Handhelds">
      <span class="category_icon">
      <i class="fa fa-mobile fa-fw"></i></span>
      <span class="category_content">
      Mobiles</span>
      <span><i class="fa fa-chevron-right pull-right"></i></span>
      <div class="sub_categories light-border no_display" id="sub_cat_Handhelds">asdasdasasdas</div>
    </li>
  </a>
  <a href="/product/IT">
    <li class="category list-group-item" id="IT">
      <span class="category_icon">
      <i class="fa fa-info-circle fa-fw"></i></span>
      <span class="category_content">
      Graphics Cards</span>
      <span><i class="fa fa-chevron-right pull-right"></i></span>
      <div class="sub_categories light-border no_display" id="sub_cat_IT">asdasdasasdas</div>
    </li>
  </a>
  <a href="/product/TV">
    <li class="category list-group-item" id="TV">
      <span class="category_icon">
      <i class="fa fa-television fa-fw"></i></span>
      <span class="category_content">Television</span>
      <span><i class="fa fa-chevron-right pull-right"></i></span>
      <div class="sub_categories light-border no_display" id="sub_cat_TV">asdasdasasdas</div>
    </li>
  </a>
</ul>

Answer 1

当您需要SELECT Rental.Id, Book.Title AS BookRented, CONCAT(StudentBorrower.FirstName, ' ', StudentBorrower.LastName) AS RentedBy, Rental.CheckOutDate, CONCAT(w1.FirstName, ' ', w1.LastName) AS CheckedOutBy, Rental.DueDate, Rental.CheckInDate, CONCAT(w2.FirstName, ' ', w2.LastName AS CheckedInBy FROM Rental JOIN Book ON Book.Barcode = Rental.BookId JOIN StudentBorrower ON StudentBorrower.BannerId = Rental.BorrowerId JOIN Worker w1 ON w1.BannerId = Rental.CheckOutWorkerId JOIN Worker w2 ON w2.BannerId = Rental.CheckInWorkerId ORDER BY Rental.Id ASC选择器时，您正在使用班级选择器.：

id

Answer 2

您的子类别元素有一个 id sub_cat_x，而不是一个类。

因此，您需要使用$("#sub_cat_" + cat)，因为#表示ID，.表示类。

此外，您只需使用.toggle()隐藏/显示项目。

$(document).ready(function() {
    $(".category").hover(function() {
        var cat = $(this).attr('id');

        $("#sub_cat_" + cat).toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="categories list-group">
  <a href="/product/Cameras">
    <li class="category list-group-item" id="Cameras">
      <span class="category_icon">
								<i class="fa fa-camera fa-fw"></i>
															</span>
      <span class="category_content">
								Camera
							</span>
      <span>
								<i class="fa fa-chevron-right pull-right"></i>
							</span>

      <div class="sub_categories light-border no_display" id="sub_cat_Cameras">
        asdasdasasdas
      </div>
    </li>
  </a>
  <a href="/product/Clothes">
    <li class="category list-group-item" id="Clothes">
      <span class="category_icon">
								 
								<i class="fa fa-info-circle fa-fw"></i>								
															</span>
      <span class="category_content">
								Clothes
							</span>
      <span>
								<i class="fa fa-chevron-right pull-right"></i>
							</span>

      <div class="sub_categories light-border no_display" id="sub_cat_Clothes">
        asdasdasasdas
      </div>
    </li>
  </a>
  <a href="/product/Handhelds">
    <li class="category list-group-item" id="Handhelds">
      <span class="category_icon">
								<i class="fa fa-mobile fa-fw"></i>
															</span>
      <span class="category_content">
								Mobiles
							</span>
      <span>
								<i class="fa fa-chevron-right pull-right"></i>
							</span>

      <div class="sub_categories light-border no_display" id="sub_cat_Handhelds">
        asdasdasasdas
      </div>
    </li>
  </a>
  <a href="/product/IT">
    <li class="category list-group-item" id="IT">
      <span class="category_icon">
								 
								<i class="fa fa-info-circle fa-fw"></i>								
															</span>
      <span class="category_content">
								Graphics Cards
							</span>
      <span>
								<i class="fa fa-chevron-right pull-right"></i>
							</span>

      <div class="sub_categories light-border no_display" id="sub_cat_IT">
        asdasdasasdas
      </div>
    </li>
  </a>
  <a href="/product/TV">
    <li class="category list-group-item" id="TV">
      <span class="category_icon">
								<i class="fa fa-television fa-fw"></i>
															</span>
      <span class="category_content">
								Television
							</span>
      <span>
								<i class="fa fa-chevron-right pull-right"></i>
							</span>

      <div class="sub_categories light-border no_display" id="sub_cat_TV">
        asdasdasasdas
      </div>
    </li>
  </a>
</ul>

尝试在jquery中根据id显示div

2 个答案: