Question

嗨，我是angularjs的新手。我在angularjs.中使用手风琴。它用于显示我想在网站上显示的频道列表。

然而我遇到了一个问题。问题是我要实现一个手风琴，当页面第一次加载时应该显示隐藏，当我们点击两次下拉框时它应该会崩溃。总之我想要实现可折叠的手风琴。

我怎么会遇到一些相同的问题。以下是用于实现手风琴的代码。

$scope.openTab = function(e, object) {
        if(object.active){
            return false;
        }
        var thisElement = $(e.currentTarget);
        $scope.cleanObject($scope.tabs, 'active', false);
        object.active = true;
        $scope.openThread( object.discussions, object.discussions[0] );

         // Sometimes the tab opens off the screen, so we're adding some automatic scrolling
          // The setTimeout is to make sure we get the position after it's been animated (0.2s in CSS)
      setTimeout(function() {
        $('body, window').animate({scrollTop: thisElement.position().top - 50 + 'px'});
       }, 205)
            console.log("This is inside the tab")
        $('#accordion').accordion('activate', false );

    }

$scope.cleanObject = function(arr, param, value) {
        var len = arr.length;
        for(var i = 0; i < len; i++) {
            arr[i][param] = value;
        }
    } 

$scope.openThread = function(thisTabDiscussions, thread) {
        var $loadingIndicator = $('.discussionContents .loadingIndicator');

        // Set all threads as inactive
        $scope.cleanObject( thisTabDiscussions, 'active', false );

        // Activate the currently selected thread
        thread.active = true;
        thread.loading = true;                                   //check for accordion collapse event on click menu
        (function(thread){
            $timeout(function() {
                $scope.commentsExpanded = true;
            }, 250);
        })(thread);

        var indicatorCount = $loadingIndicator.get().length;
        for(var i = 0; i < indicatorCount; i++) {
            var $thisElement = $( $loadingIndicator[i] ),
            childrenCount = $thisElement.children().length;
            if(!childrenCount) {
                loading('show', {element: $thisElement});
            }
        }

        $scope.loadDiscussionThread(thread);

        // Set the commentsExpanded flag properly
        var openTabIndex = $scope.tabs.indexOf(thisTabDiscussions);
        if( openTabIndex != -1 && $scope.tabs[ openTabIndex ].active ) {  // the code is required to display the discussion comments
            $scope.commentsExpanded = true;
        }
        $('#accordion1').accordion({
            collapsible: true,
            autoHeight: false,
            active: false
        });

    }

我还尝试在程序中使用jquery来实现以下功能，但它无法正常工作; -

 $('#accordion1').accordion({
            collapsible: true,
            autoHeight: false,
            active: false
        });

我为手风琴编写了以下代码： -

 $scope.openNotification = function(selector_id) {
    var parentElement = ( selector_id ? $('#' + selector_id) : $('.discussionConfirmation') ),
    adjustElements = parentElement.children('li').children('.dc_check, .dc_close'),
    totalHeight = parentElement.outerHeight();

    adjustElements.height( totalHeight );
    parentElement.fadeIn().slideDown();
    setTimeout( function() {
        $scope.closeNotification(null, parentElement);
    }, 3000);
  }

  $scope.closeNotification = function(e, element) {
    if(e) {
        e.preventDefault();
        var thisElement = $(e.currentTarget),
        parentElement = thisElement.parent().parent();
    } else {
        parentElement = element;
    }

    parentElement.slideUp().fadeOut();
  }

请帮帮我。谢谢。

Answer 1

如果你想只是可折叠的效果，不需要重新发明轮子。使用引导程序。它与angularjs配合得很好，为您节省了大量时间。我希望this_link会帮助你

确定。要HTML，您需要添加下一个代码（或下一个代码:) :)：

<div class="panel panel-default">
 <div class="panel-heading" role="tab" id="headingOne">
  <h4 class="panel-title">
    <a data-toggle="collapse" ng-click="yourFunction" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
       Item #1
    </a>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  <div class="panel-body" id="body-accordion1">
    body text body text body text
  </div>
</div>

请注意，attr aria-expanded =“true”告诉您，您的手风琴琴身会自动展开。接下来你需要的是像这样添加angularjs控制器函数（如果你从服务器获得的手风琴内容）：

$scope.yourFunction = function(){
  var bodyAccordion = $('#body-accordion1')
  bodyAccordion.append( "<div>Your text or whatever yor want</div>" );
}

和最后一部分 - 添加监听器onclick或将ng-click（angular指令）添加到html，就像在我的示例中一样。祝你好运）

Angularjs-Accordion事件触发页面

1 个答案: