Question

我想在我的页面上有三列，但是column2最初的列大小应为0，即col-md-3。当用户点击导航栏中的链接时，我希望column2扩展为html，而column3应缩小以进行调整。

例如，这就是我想象我的列'<div class="container-fluid"> <div class="row no-gutter"> <div id="col1" class="col-md-1"> <vs-navbar></vs-navbar> </div> <div id="col2" class="col-md-0"> <router-outlet></router-outlet> </div> <div id="col3" class="col-md-11"> <div class="placeholder"> </div> </div> </div> </div>在加载页面时的情况：

navbar

<nav class="navbar navbar-inverse navbar-full"> <ul class="nav nav-stacked"> <li> <a>Home</a> </li> <li> <a>Info</a> </li> </ul> </nav>可以是：

Info

点击html链接后，我希望<div class="container-fluid"> <div class="row no-gutter"> <div id="col1" class="col-md-1"> <vs-navbar></vs-navbar> </div> <div id="col2" class="col-md-3"> <router-outlet></router-outlet> </div> <div id="col3" class="col-md-8"> <div class="placeholder"> </div> </div> </div> </div>转换为：

var keepSearching: Bool = true
var timer = NSTimer()
func timerAction() {
    keepSearching = false
}
func searchBar(searchBar: UISearchBar, textDidChange searchText: String) {

if searchBar.text == nil || searchBar.text == "" {
    inSearchMode = false

} 
else if(keepSearching) {

    if allInterestsArray.contains(searchBar.text!.lowercaseString) {


      // just in case user keeps on typing, invalidate the previous timer, before it happens.
      timer.invalidate()

      // schedule a new timer everytime.
      timer = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: false)

      ref.child(searchBar.text!.lowercaseString).child("users")

        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(1 * Double(NSEC_PER_SEC))), dispatch_get_main_queue()) { () -> Void in

            print("this should be running")
            print(searchBar.text!.lowercaseString)

            let handle = roomsRef.observeSingleEventOfType(.Value, withBlock: { (snapshot: FIRDataSnapshot) in

                print(snapshot.value)

                if let snapshots = snapshot.children.allObjects as? [FIRDataSnapshot] {
                    for snap in snapshots {

                        print(snap)
                    }

                }

            })
        }
    }
    else {
        print("doesn't exist")
    }
}

我有一个模糊而乱的想法是如何用一些javascript来完成的，但我已经在几个网站上看到过这种情况，所以我正在寻找干净，推荐的做法，特别是当我'我使用bootstrap。

Answer 1

因为你有ID，我现在假设你的行的确切结构。

如果是这样，解决方案可以基于 toggleClass ：

＆＃13;

$('a:contains("Info")').on('click', function(e) {
  $('#col2').toggleClass('col-md-0 col-md-3')
  $('#col3').toggleClass('col-md-11 col-md-8')
})

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-full">
    <ul class="nav nav-stacked">
        <li>
            <a>Home</a>
        </li>
        <li>
            <a>Info</a>
        </li>
    </ul>
</nav>

<div class="container-fluid">
    <div class="row no-gutter">
        <div id="col1" class="col-md-1">
            <vs-navbar>aaaaaa</vs-navbar>
        </div>
        <div id="col2" class="col-md-0">
            <router-outlet>bbbbbb</router-outlet>
        </div>
        <div id="col3" class="col-md-11">
            <div class="placeholder">cccc
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

您可以使用:target伪类。

：target伪类用于设置一个元素的样式文档中内部链接的目标。

基本上您隐藏了列，然后当用户点击链接时，它会显示：

#col2{
  display: none;
}

#col2:target{
  display: block;
}

CODE SNIPPET

＆＃13;

.row {
  display: flex;
}
.col {
  background-color: dodgerblue;
  flex: 0 0 30%;
  height: 100px;
}
.col:nth-child(odd) {
  background-color: gold;
}
#col2 {
  display: none;
  animation: open 300ms linear both;
}
#col2:target {
  display: block;
}
@keyframes open {
  0 {
    transform: rotateX(0);
  }
  55% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}

＆＃13;

<a href="#col2">Trigger Col 2</a>
<div class="row">
  <div id="col1" class="col"></div>
  <div id="col2" class="col"></div>
  <div id="col3" class="col"></div>
</div>

＆＃13;

编辑：

要在.col-md-8和.col-md-11之间进行更改，您可以使用md视口的相应媒体查询，在第二列不存在时更改.col-md-8的宽度。

@media (min-width: 992px) {
  #col2 + .col-md-8 {
    width: 91.66666667%;
  }
  #col2:target + .col-md-8 {
    width: 66.66666667%;
  }
}

Bootstrap演示：

＆＃13;

div[class*="col"],
div[class^="col"] {
  height: 100px;
}
#col1 {
  background-color: gold;
}
#col3 {
  background-color: purple;
}
#col2 {
  background-color: dodgerblue;
  display: none;
  animation: open 300ms linear both;
}
#col2:target {
  display: block;
}
@media (min-width: 992px) {
  #col2 + .col-md-8 {
    width: 91.66666667%;
  }
  #col2:target + .col-md-8 {
    width: 66.66666667%;
  }
}
@keyframes open {
  0 {
    transform: rotateX(0);
  }
  55% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href="#col2">Trigger Col 2</a>
<div class="container-fluid">
  <div class="row no-gutter">
    <div id="col1" class="col-md-1">
      <vs-navbar></vs-navbar>
    </div>
    <div id="col2" class="col-md-3">
      <router-outlet></router-outlet>
    </div>
    <div id="col3" class="col-md-8">
      <div class="placeholder">
      </div>
    </div>
  </div>
</div>

＆＃13;

单击时动态更改列大小

2 个答案:

编辑：