选择其他项目时删除切换类

时间:2015-09-24 15:32:04

标签: javascript jquery toggle

在我的移动网站上,我有一个垂直下拉菜单(如手风琴),其中每个父项都有一个向下箭头以指示下拉菜单。当用户单击父项时箭头旋转,当您再次单击它以关闭下拉列表时,它会旋转回原始状态。但是,如果您没有单击下拉菜单关闭它,只需单击另一个父项,则下拉菜单将关闭,但箭头将保持在旋转位置。 这是代码:

$('li.nav-about').click(function () {
        $('#arrow-about').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

$(' li.nav-industry').click(function () {
        $('#arrow-indusrty').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

$('li.nav-application').click(function () {
        $('#arrow-application').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

有关在点击其他项目时如何删除'rotate'类的任何建议吗?

EDIT 这是标记的样子:

<ul id="nav-list">

   <li class="nav-list_item nav-about"><a href="#">About Us</a><div class="arrow-down" id="arrow-about"></div>
  <ul>
    <li>....</li>
    <li>...</li>
    <li>...</li>
  </ul>
</li>


<li class="nav-list_item nav-products"><a href="#">Products</a><div class="arrow-down" id="arrow-products"></div>

  <ul>
    <li>....</li>
    <li>...</li>
    <li>...</li>
  </ul>
</li>

3 个答案:

答案 0 :(得分:0)

您可以在切换当前内容之前从每个按钮中删除现有的rotate类:

$('li.nav-about').click(function () {
        $('.rotate:not("#arrow-about")').removeClass("rotate");
        $('#arrow-about').toggleClass("rotate");
        $(this).find('ul').toggle();
 });

(' li.nav-industry').click(function () {
        $('.rotate:not("#arrow-indusrty")').removeClass("rotate");
        $('#arrow-indusrty').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

$('li.nav-application').click(function () {
        $('.rotate:not("#arrow-application")').removeClass("rotate");
        $('#arrow-application').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

答案 1 :(得分:0)

如果您不想更改太多代码,请尝试此操作。

#include <stdio.h>
#include "./../linux.h"
#include "./tcp.h"
#include <pthread.h>

static int clients = 0;
static int* memptr = NULL;

void serve(void*);

int* push(int* memptr, int nsfd) {
  clients++;
  if (clients == 1)
     memptr = (int*)malloc(sizeof(int) * clients);
  else
     memptr = (int*)realloc(memptr, sizeof(int) * clients);
  memptr[clients - 1] = nsfd;
 return memptr;
 }



 int main(int argc, char** argv) {
    pthread_t thread[2];
    int threadCount = 0;

   if (argc != 3){
     printf("\nUsage: ./server port_number maximum_clients\n");
     return 1;
   }
   static struct sockaddr_in sock, sock_client;
   int len, new_sock_fd;
   int sock_fd = socket(PF_INET, SOCK_STREAM, 0);
   if (sock_fd == -1){
     perror("socket");
     exit(1);
   }
  sock.sin_family = PF_INET;
  sock.sin_port = htons(atoi(argv[1]));
  sock.sin_addr.s_addr  = inet_addr("0.0.0.0");
  len = sizeof(sock);
  if ( bind(sock_fd, (struct sockaddr *)&sock, len) == -1){
    perror("bind");
    exit(1);
  }
  if ( listen(sock_fd, atoi(argv[2])) == -1){
    perror("listen");
    exit(1);
  }

  while(1) {
     new_sock_fd = accept(sock_fd, (struct sockaddr *)&sock_client, (socklen_t *)&len);
     memptr = push(memptr, new_sock_fd);

     if (new_sock_fd == -1){
       perror("accept");
       exit(1);
     }

  pthread_create(&(thread[threadCount]), NULL, (void*)&serve, (void *)&new_sock_fd);
  pthread_join(thread[threadCount++], NULL);
  printf("threadCount  = %d\n", threadCount);

     sleep(1);
   }
return 0;
 }



 void serve(void* fd){
   int* new_sock_fd = (int*)fd;
   Packet packet;
   while(1){
      bzero(&packet, sizeof(packet));
      read(*new_sock_fd , &packet, sizeof(packet));
      printf("%d\n", *new_sock_fd);
      //printf("recipientId = %d\n", packet.recipientId);
      // printf("message = %s\n", packet.data);
      write(memptr[packet.recipientId - 1], packet.data, 1024);
     }
    pthread_exit(0);
    }

现在您确定每个元素(而不是所选元素)将转为其原始状态。

答案 2 :(得分:0)

你可以这样做。

var toggleNavigation = function(){
    var r_navigation = $('li.nav-about,li.nav-industry,li.nav-application');

    $(r_navigation).each(function(i, oNav){
        $(oNav).on('click',function(){
            if(!$(oNav).hasClass('rotate')){
                $(r_navigation).removeClass('rotate');
                $(oNav).addClass('rotate');
            }else{
               $(oNav).removeClass('rotate');
            }
        });
    });
};