javascript - Asp.Net MVC 中的 Accordion 使用 html、css 和 JS

标签 javascript html css

尝试在我的应用程序中实现 Accordion 。 Accordion 本身显示正确，但单击“+”打开描述后，这里没有任何反应。当用户点击每个 '+' 时，选项卡应打开以显示相应的描述。任何人都可以看到是什么导致它不起作用吗？看下面的代码。

HTML(只是其中一个标签的片段)

<div class="accord-tab-box">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="accordion-box">

          <div class="accord-elem">
            <div class="accord-title">
              <h5><i class="fa fa-money fa-fw"></i>Software Development</h5>
              <a class="accord-link" href="#"></a>
            </div>
            <div class="accord-content">
              <p>IT related have a team of software developers who are skilled in Open source Java, Spring, Hibernate, Struts, GWT; DotNet framework and have written many web based systems:<br />• Requisition system<br />• Tender management system <br />•
                Invoice tracking system<br />• Our team has more than 20 years experience in Software development life cycle. Reference sites: <br />• KZN Department of Works;<br />• KZN Department Of Education;<br />• EC DEDEAT;<br /><br />• Neha Shipping;<br
                /><br />• SJS Consulting<br /> </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.container .content {}

hr,
.borderedbox {
  border-color: #D7D7D7;
}

.inspace-5 {
  padding: 5px;
}

.imgl {
  margin: 0 15px 10px 0;
  clear: left;
}

.imgr {
  margin: 0 0 10px 15px;
  clear: right;
}

.fl_left,
.imgl {
  float: left;
}

.fl_right,
.imgr {
  float: right;
}

.borderedbox {
  border: 1px solid;
  border-color: darkgray;
}

.accord-tab-box {
  padding-top: 40px;
  padding-bottom: 20px;
}

.accordion-box {
  margin-bottom: 20px;
}

.accord-elem {
  margin-bottom: 20px;
}

.accord-title {
  padding: 16px 14px;
  border: 1px solid #dbdbdb;
  position: relative;
}

.accord-title h5 {
  padding-right: 48px;
}

.accord-title h5 i {
  color: #007aff;
  font-size: 20px;
  vertical-align: middle;
  margin-right: 12px;
}

a.accord-link {
  display: inline-block;
  position: absolute;
  width: 46px;
  height: 100%;
  top: 0;
  right: 0;
  border-left: 1px solid #dbdbdb;
  background: url('/Content/MyTemplate/images/add.png') center center no-repeat;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.accord-elem.active a.accord-link {
  background: url('/Content/MyTemplate/images/substract.png') center center no-repeat;
}

a.accord-link.opened {
  background: url('/Content/MyTemplate/images/substract.png') center center no-repeat;
}

.accord-content {
  display: none;
  padding: 22px;
  border: 1px solid #dbdbdb;
  border-top: none;
  overflow: hidden;
}

.accord-content span.image-content {
  display: inline-block;
  float: left;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  margin-right: 22px;
  background: #007aff;
}

.accord-content span.logo-content {
  display: inline-block;
  float: left;
  width: 110px;
  margin-right: 15px;
}

.accord-content span.image-content i {
  color: #fff;
  font-size: 30px;
  text-align: center;
  width: 100%;
  line-height: 68px;
  vertical-align: middle;
}

.accord-content span.logo-content i {
  color: #fff;
  font-size: 30px;
  text-align: center;
  width: 100%;
  line-height: 68px;
  vertical-align: middle;
}

.accord-elem.active .accord-content {
  display: block;
}

.why-convertible-box {
  padding-top: 60px;
}

.why-convertible-box h1 {
  margin-bottom: 10px;
}

.why-convertible-box h1 span {
  font-weight: 600;
}

.why-convertible-box h1 i {
  color: #0a9dbd;
  margin-left: 10px;
}

.why-convertible-box p {
  margin-bottom: 15px;
}

.why-convertible-box p a {
  color: #0076f9;
  font-weight: 700;
}

JS

 var clickElem = $('a.accord-link');

    clickElem.on('click', function (e) {
        e.preventDefault();

        var $this = $(this),
			parentCheck = $this.parents('.accord-elem'),
			accordItems = $('.accord-elem'),
			accordContent = $('.accord-content');

        if (!parentCheck.hasClass('active')) {

            accordContent.slideUp(400, function () {
                accordItems.removeClass('active');
            });
            parentCheck.find('.accord-content').slideDown(400, function () {
                parentCheck.addClass('active');
            });

        } else {

            accordContent.slideUp(400, function () {
                accordItems.removeClass('active');
            });

        }
    });

最佳答案

也许你忘了链接 jquery 

jQuery(document).ready(function(){
var clickElem = $('a.accord-link');

    clickElem.on('click', function (e) {
        e.preventDefault();

        var $this = $(this),
			parentCheck = $this.parents('.accord-elem'),
			accordItems = $('.accord-elem'),
			accordContent = $('.accord-content');

        if (!parentCheck.hasClass('active')) {

            accordContent.slideUp(400, function () {
                accordItems.removeClass('active');
            });
            parentCheck.find('.accord-content').slideDown(400, function () {
                parentCheck.addClass('active');
            });

        } else {

            accordContent.slideUp(400, function () {
                accordItems.removeClass('active');
            });

        }
    });
    });
.container .content {}

hr,
.borderedbox {
  border-color: #D7D7D7;
}

.inspace-5 {
  padding: 5px;
}

.imgl {
  margin: 0 15px 10px 0;
  clear: left;
}

.imgr {
  margin: 0 0 10px 15px;
  clear: right;
}

.fl_left,
.imgl {
  float: left;
}

.fl_right,
.imgr {
  float: right;
}

.borderedbox {
  border: 1px solid;
  border-color: darkgray;
}

.accord-tab-box {
  padding-top: 40px;
  padding-bottom: 20px;
}

.accordion-box {
  margin-bottom: 20px;
}

.accord-elem {
  margin-bottom: 20px;
}

.accord-title {
  padding: 16px 14px;
  border: 1px solid #dbdbdb;
  position: relative;
}

.accord-title h5 {
  padding-right: 48px;
}

.accord-title h5 i {
  color: #007aff;
  font-size: 20px;
  vertical-align: middle;
  margin-right: 12px;
}

a.accord-link {
  display: inline-block;
  position: absolute;
  width: 46px;
  height: 100%;
  top: 0;
  right: 0;
  border-left: 1px solid #dbdbdb;
  background: url('/Content/MyTemplate/images/add.png') center center no-repeat;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.accord-elem.active a.accord-link {
  background: url('/Content/MyTemplate/images/substract.png') center center no-repeat;
}

a.accord-link.opened {
  background: url('/Content/MyTemplate/images/substract.png') center center no-repeat;
}

.accord-content {
  display: none;
  padding: 22px;
  border: 1px solid #dbdbdb;
  border-top: none;
  overflow: hidden;
}

.accord-content span.image-content {
  display: inline-block;
  float: left;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  margin-right: 22px;
  background: #007aff;
}

.accord-content span.logo-content {
  display: inline-block;
  float: left;
  width: 110px;
  margin-right: 15px;
}

.accord-content span.image-content i {
  color: #fff;
  font-size: 30px;
  text-align: center;
  width: 100%;
  line-height: 68px;
  vertical-align: middle;
}

.accord-content span.logo-content i {
  color: #fff;
  font-size: 30px;
  text-align: center;
  width: 100%;
  line-height: 68px;
  vertical-align: middle;
}

.accord-elem.active .accord-content {
  display: block;
}

.why-convertible-box {
  padding-top: 60px;
}

.why-convertible-box h1 {
  margin-bottom: 10px;
}

.why-convertible-box h1 span {
  font-weight: 600;
}

.why-convertible-box h1 i {
  color: #0a9dbd;
  margin-left: 10px;
}

.why-convertible-box p {
  margin-bottom: 15px;
}

.why-convertible-box p a {
  color: #0076f9;
  font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accord-tab-box">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="accordion-box">

          <div class="accord-elem">
            <div class="accord-title">
              <h5><i class="fa fa-money fa-fw"></i>Software Development</h5>
              <a class="accord-link" href="#"></a>
            </div>
            <div class="accord-content">
              <p>IT related have a team of software developers who are skilled in Open source Java, Spring, Hibernate, Struts, GWT; DotNet framework and have written many web based systems:<br />• Requisition system<br />• Tender management system <br />•
                Invoice tracking system<br />• Our team has more than 20 years experience in Software development life cycle. Reference sites: <br />• KZN Department of Works;<br />• KZN Department Of Education;<br />• EC DEDEAT;<br /><br />• Neha Shipping;<br
                /><br />• SJS Consulting<br /> </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关于javascript - Asp.Net MVC 中的 Accordion 使用 html、css 和 JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49894190/

上一篇：html - White Space nowrap 将宽度推向遗忘

下一篇：javascript - 图像没有完全向左移动

相关文章：

javascript - 有没有办法在 react 中使用 JS 动态更新 scss 变量？

html - 为什么最后一个 li 元素出现在父容器之外？

html - 使用播放 ListView 嵌入 youtube 播放器

Javascript:什么是 eslintcache 文件以及为什么总是在 create react app 中生成

HTML 表单到 SQL 数据库

php - 特定 if 语句的含义

html - 使谷歌图表响应

javascript - 调用网络服务 AngularJS

javascript - "Cannot transition to abstract state' “当试图在侧边栏中突出显示父项时

javascript - 子进程 - Node.js 与 CasperJs : How to include arguments?

©2024 IT工具网  联系我们